조건부 랜더링 시 Hook 사용 조심하기

 

if (movie === undefined) return; 를 useEffect 호출보다 먼저 사용하게 된다면,

movie에 값에 따라 useEffect가 호출되고 안되고 버전이 두개로 나뉘므로, 리액트에서 인식 불가 에러

 

  if (movie === undefined) return;   // useEffect 호출 전 해당 함수 종료
  
  useEffect(() => {
    setIsLoading(true);
    const fetchMovieDetail = async () => {
      const result = await movieRepository.fetchMovieDetail(movie.imdbID);
      setIsLoading(false);
    };
    fetchMovieDetail();
  }, [movie]);

 

 

해당 분기처리는 위젯 내에서 처리하거나, useEffect를 호출 후 종료하는 형식으로 변경해야한다.

  useEffect(() => {
    if (movie === undefined) return;
    setIsLoading(true);
    const fetchMovieDetail = async () => {
      const result = await movieRepository.fetchMovieDetail(movie.imdbID);
      setIsLoading(false);
    };
    fetchMovieDetail();
  }, [movie]);