[TIL] 2021-03-14

오늘의 문제점 해결

문제 )response로 받은 값이 최종적으로 null 값이 나온 경우

• initData라는 함수를 useEffect로 실행할 때 콘솔에 데이터가 나왔다가 다시 null로 회귀하는 현상

기존 문제의 코드

const initData = useCallback(async () => {
    try {
      // const response = await moviesApi.nowPlaying();
      // 객체 비구조화 할당을 통해 위 코드와 동일하게 작동하는 방식

      // const {
      //   data: { results: nowPlaying },
      // } = await moviesApi.nowPlaying();
      const {
        data: { results: nowPlaying },
      } = await moviesApi.nowPlaying();

      const {
        data: { results: upcoming },
      } = await moviesApi.upcoming();

      const {
        data: { results: popular },
      } = await moviesApi.popular();

      setValues({ ...values, nowPlaying, popular, upcoming });
    } catch {
      setValues({
        ...values,
        error: "요청하신 무비의 정보를 찾을 수 없습니다.",
      });
    } finally {
				setValues({...values, loading : false })
    }
  }, []);

useEffect(() => {
    initData();
  }, [initData]);

해결

해결 코드

finally {
	if (error !== null) {
	  setValues({ ...values, loading: false });
  }
}

• try..catch/finally 에서 finally는 try든 catch든 실행이 되는 코드다. 헌데 finally 코드에서 values를 복제하게 되니 state가 변경되서 그런거 같은데… 다시 생각 해 볼 필요가 있는 코드

다른 해결방법

• ...values 쓰지않고 해당하는 state의 값을 넣어준다.

const initData = useCallback(async () => {
    try {
      const {
        data: { results: nowPlaying },
      } = await moviesApi.nowPlaying();

      const {
        data: { results: upcoming },
      } = await moviesApi.upcoming();

      const {
        data: { results: popular },
      } = await moviesApi.popular();

      setValues({ nowPlaying, popular, upcoming });
    } catch {
      setValues({
        error: "요청하신 무비의 정보를 찾을 수 없습니다.",
      });
    } finally {
				setValues({ loading : false })
    }
  }, []);