[ React ] Object 값의 유무에 따라 함수 실행

const [movies, setMovies] = useState();

useEffect(() => {
    (async () => {
      const { results } = await (
        await fetch(
          `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`
        )
      ).json();
      setMovies(results);
    })();
  }, []);
  return (
    <div>
      <Seo title="Home" />
      {!movies && <h4>Loading...</h4>}
      // movies 뒤에?를 붙여 movies 안에 데이터가 없다면 map 함수가 실행되지 않습니다.
      {movies?.map((movie) => (
        <div key={movie.id}>
          <h4>{movie.original_title}</h4>
        </div>
      ))}
    </div>
  );

loading을 구현하기 위해 영화 데이터를 담을 state의 초깃값을 넣지 않고
데이터가 없을 때 .map이 실행되지 않도록 state 뒤에?를 붙여 데이터가 없다면 빈 화면만 출력되도록 할 수 있습니다.