[넷플릭스 클론코딩] 배너 조건부 렌더링

이제 리듀서로 받아온 영화 정보를 바탕으로 홈페이지의 배너를 만들어보자.
배너는 보통 가장 인기있는 영화가 표시되므로 popularMovies의 첫번째 영화를 보여주면 될 것 같다고 생각하고 진행했다.

//Home.js
function Home() {
  const dispatch = useDispatch();
  
  //useSelector로 리덕스의 상태 호출
  const { popularMovies, topRatedMovies, upcomingMovies } = useSelector((state) => state.movie);

  
  useEffect(() => {
    dispatch(movieActions.getMovies());
  }, []);

  return (
    <div>
      <Banner popularMovie={popularMovies.results[0]} />
    </div>
  );
}

위의 코드를 실행하면 다음과 같은 에러가 난다. 왜냐하면 useEffect(디스패치)는 페이지가 렌더가 된 후에 실행되기 때문에, 페이지를 렌더링 할 때는 리덕스 상태에 영화 정보가 없는 상태이기 때문이다.

따라서 다음과 같이 popularMovies.results라는 데이터가 있다면 렌더링을 시켜주는 조건부 렌더링을 실시해야 한다. &&은 자바스크립트의 단축 평가 문법의 논리곱 연산자로, 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환한다.

//Home.js
function Home() {
  const dispatch = useDispatch();
  
  const { popularMovies, topRatedMovies, upcomingMovies } = useSelector((state) => state.movie);

  // ⚠️useEffect는 렌더 후 호출되므로 주의!
  useEffect(() => {
    dispatch(movieActions.getMovies());
  }, []);

  return (
    <div>
    //💯조건부 렌더링
      {popularMovies.results && <Banner popularMovie={popularMovies.results[0]} />)}
    </div>
  );
}

이제 배너에 나올 영화의 정보가 나오게 된다.