개발자
안녕하세요. 지금 api를 호출 후에 api에서 에러가 났을 때, 해당 에러의 status를 저장하여 해당 status에 맞는 에러 모달을 띄워주려고 하고 있습니다. ``` catch (error: unknown) { if (error instanceof AxiosError) { handleErrorModal(error.response?.status); } return null; } ``` 이렇게 fetchData에서 에러가 발생했을 때, handleErrorModal로 에러 status를 전달하고 있습니다. ``` const [errorType, setErrorType] = useRecoilState(errorDataState); const handleErrorModal = (errorStatus: string | number | null) => { setErrorType(errorStatus); }; ``` 그리고 handleErrorModal 함수는 이와 같이 작성을 해놓은 상태이고요. 근데, setState가 비동기로 작동해서인지 errorStatus가 저장이 되지 않아서 계속 초기값인 null을 띄워줍니다. 그리고, 계속 ``` Warning: Can't perform a React state update on a component that hasn't mounted yet. This indicates that you have a side-effect in your render function that asynchronously later calls tries to update the component. Move this work to useEffect instead. ``` 이 오류를 띄우네요. 이 문제를 해결하기 위해서는 useEffect를 쓰는 방법외에는 다른 방법이 없는걸까요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 03월 16일
네, 그렇습니다. 주로 비동기적인 함수에서 React의 state를 변경할 때는 `useEffect`를 사용하는 것이 권장됩니다. 여기서 보이는 문제는 아마도 `handleErrorModal` 함수가 비동기적으로 실행되고 있고, 이 함수가 완료되기 전에 해당 컴포넌트가 마운트를 종료하거나 다시 랜더링되고 있는 것 같습니다. 이렇게 되면 "Can't perform a React state update on a component that hasn't mounted yet" 와 같은 경고 메시지가 발생하게 됩니다. 이러한 경우 `useEffect`를 사용하여 errorStatus 값을 변경해주는 로직을 감쌈으로써 해결할 수 있습니다. 즉, 현재의 에러 상태(error status)에 따라 errorType을 설정하는 부분을 `useEffect` 내부로 옮겨주세요. 다음과 같이 코드를 수정해보세요: ```javascript const [errorType, setErrorType] = useRecoilState(errorDataState); const [currentErrorStatus, setCurrentErrorStatus] = useState(null); const handleErrorModal = (errorStatus: string | number | null) => { setCurrentErrorStatus(errorStatus); }; useEffect(() => { setErrorType(currentErrorStatus); }, [currentErrorStatus]); ``` 위의 코드로 바꾸면 handleErrorModal에서 받아온 errorStatus 값을 currentErrorStatus state에 저장하고, 그 값이 변경될 때마다 useEffect가 실행되어 실제 recoil 상태인 errorType을 업데이트 하게 됩니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!