22.01.13 Error Handling

[Seunghoya]

어떤 에러인가요?

• setState함수가 의도대로 상태를 변경하지 못하는 문제가 발생해 원하는 때에 맞게 상태변경이 이뤄지지 않고 있습니다.

const getFolowFeedLists = useCallback(() => {
    setLoading(true);
    console.log('요청보냄', loading);
    setTimeout(() => {
      Axios.get(`http://localhost:4000/article/${userInfo.id}?page=${page}`,
        {
          headers:
      {
        'Contnet-Type': 'application/json',
        withCredentials: true
      }
        })
        .then((res) => {
          console.log(res.data.articleData.length);
          if (res.data.articleData.length !== 0) {
            setFolowFeedLists(followFeedLists => [...followFeedLists, ...res.data.articleData]);
          } else {
            setLoading(false);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    }, 1000);
    setLoading(false);
    console.log('요청 끝', loading);
  }, [page]);

getFolowFeedLists 함수 실행시 처음 setLoading 상태변경 함수가 실행되게 처리했는데, 실제로는 getFolowFeedLists 함수가 다 끝나고 나서야 처리되고, 이마저도 getFolowFeedLists 함수 마지막에 다시 false로 상태변경이 이뤄지기 때문에 실제로는 상태변경하는 동안 처리되는 문제가 단 하나도 없었습니다.

에러 핸들링 방법

• setState 함수가 비동기로 작동되는게 원인인데 이를 강제로 동기처리 해주는 방법들에 대해 학습했고, 이를 처리하는 방법에 대해 고민중입니다.

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

링크
링크
링크