22.01.15 Error Handling

[Seunghoya]

어떤 에러인가요?

• setState 함수가 처리되는 과정에서 비동기로 처리되다보니 의도대로 상태가 변경되지 않아 상태를 활용할 수 없는 에러가 발생함.
• setState 함수 자체가 비동기함수라 class 문법에서 콜백함수를 두 번째 인자로 불러서 활용하는 방법이 있었는데 해당 방법은 함수형 컴포넌트에선 적용이 안되는 문제가 있었음.

const getFolowFeedLists = useCallback(async () => {
    setLoading(true) // getFolowFeedLists 함수 실행시 loading 상태가 true로 바뀜
    await Axios.get(`http://localhost:4000/article/${userInfo.id}?page=${page}`)
    .then((res) => {
      setFolowFeedLists(followFeedLists => [...followFeedLists, ...res.data.articleData])
    })
    setLoading(false) // 서버 요청이 끝나고 getFolowFeedLists 실행이 종료되기 전 loading 상태가 다시 false로 바뀜
  }, [page])

위 코드에서 함수 getFolowFeedLists가 실행되면 setLoading가 바로 실행되어 loading상태가 변경되는 것을 의도했지만, 실제 개발자 도구에서 확인한 결과는 상태변경이 일어나지 않았다.

에러 핸들링 방법

• setState 함수를 동기처리 하는 방법에 대해 학습하던 중, setState(state => {state.props})형식으로 콜백함수를 인자로 넘겨서 처리하면 된다는 식의 해결법을 찾았으나 해당 내용은 클래스문법에서 적용되던 방법이었고, 결론은 useEffect를 사용해 랜더링 될 때마다 동기적으로 함수가 실행되게 처리하는 방법을 적용했다.

useEffect(() => {
    function getFollowFeedLists () {
      if (more) {
        setLoading(true);
        setTimeout(() => {
          Axios({
            method: 'get',
            url: `http://localhost:4000/article/${state.userInfo.id}?page=${page}`,
            withCredentials: true,
            headers: {
              'Contnet-Type': 'application/json'
            }
          })
            .then((res) => {
              console.log('3')
              if (res.data.articleData.length === 0) {
                console.log('마지막줄');
                setMore(false);
              }
              console.log('4')
              setFolowFeedLists(followFeedLists => [...followFeedLists, ...res.data.articleData]);
              setLoading(false);
            });
        }, 1000);
      }
    }
    console.log('5')
    getFollowFeedLists();
  }, [state.userInfo.id, page, more])

해당 함수는 state.userInfo.id page more가 바뀔때마다 랜더링 되면서 getFollowFeedLists함수를 실행하므로 동기적으로 setLoading을 적용해 loading 상태를 동기적으로 관리할 수 있게 된다.

에러 핸들링을 위해 참고한 레퍼런스 링크

링크
링크
링크