개발자

react에서 에러 status에 따라 에러 모달을 가져오는 법

2024년 03월 16일조회 112

안녕하세요. 지금 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를 쓰는 방법외에는 다른 방법이 없는걸까요?

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 1

김하늘님의 프로필 사진

React 버전 18이상 이시라면 Suspense를 써보셔도 될 거 같습니다. 혹은 리코일에 useRecoilValueLoadable 이라는 훅이 있습니다. 이름에서 유추하실 수 있다시피 비동기 셀럭터의 값을 읽는 용도입니다.

profile picture

익명

작성자

2024년 03월 17일

서스펜스를 추가했었는데, 헤더에서 사용되는걸 고려 못하고 바디에만 걸어놔서 발생한 문제였네요 ㅠㅠ 감사합니다!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 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을 업데이트 하게 됩니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!