App.jsx — 레이아웃 구성과 데이터 가져오기

Tip: Gemini CLI로 구현하기 — App.jsx 레이아웃 & 데이터 로딩

• 프롬프트: gemini "src/App.jsx를 작성해줘. TMDB API에서 movie/now_playing, tv/airing_today, movie/top_rated 데이터를 Promise.all로 동시에 가져와야 해. useState로 3개의 상태를 관리하고, useEffect로 앱 시작 시 한 번만 호출해줘. 가져온 데이터는 Outlet의 context로 하위 페이지에 전달하고, Header와 Footer도 포함해줘. axios 인스턴스는 [axios 인스턴스 경로]에서 가져와줘."
  • 사용 가이드: [axios 인스턴스 경로]를 ./api/axios로 바꾼다. API 엔드포인트가 다르면 tv/airing_today 부분을 수정한다.

1. App.jsx의 역할

App.jsx는 GOFLEX 앱의 뼈대 역할을 한다. 이 파일이 담당하는 일은 세 가지이다.

• TMDB API에서 영화 데이터 3종(현재 상영, 인기, 최고 평점)을 가져온다
• 상단에 Header, 하단에 Footer를 배치한다
• 하위 페이지가 렌더링되는 Outlet에 데이터를 전달한다

2. 1단계 — import + 상태 변수

src/App.jsx 파일을 열고 임시 코드를 모두 지운 뒤 아래를 작성한다.

import { useState, useEffect } from "react";
import { Outlet } from "react-router";
import { Header } from "./components/Header.jsx";
import { Footer } from "./components/Footer.jsx";
import api from "./api/axios";

export default function App() {
  const [now, setNow] = useState(null);
  const [popular, setPopular] = useState(null);
  const [topRated, setTopRated] = useState(null);

3. 2단계 — API 데이터 로딩

같은 App.jsx 파일에서, const [topRated, ... 줄 바로 아래에 이어서 작성한다. 이 코드는 앱이 처음 실행될 때 TMDB 서버에 "현재 상영작, 인기작, 최고 평점 영화를 한꺼번에 보내줘"라고 요청하는 부분이다.

  async function loadMovie() {
    const [res1, res2, res3] = await Promise.all([
      api.get("movie/now_playing"),
      api.get("tv/airing_today"),
      //api.get("movie/popular"),
      api.get("movie/top_rated"),
    ]);
    setNow(res1.data.results.filter((m) => m.poster_path));
    setPopular(res2.data.results.filter((m) => m.poster_path));
    setTopRated(res3.data.results.filter((m) => m.poster_path));
  }

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

Promise.all 설명

const [res1, res2, res3] = await Promise.all([
  api.get("movie/now_playing"),
  api.get("movie/popular"),
  api.get("movie/top_rated"),
]);

Promise.all(프로미스 올)은 여러 API 요청을 동시에 보내고, 모두 끝나면 결과를 한꺼번에 받는다.

요청 3개를 순서대로 보내면 각각의 응답을 기다려야 하지만, Promise.all로 동시에 보내면 모두 끝날 때까지 한 번만 기다리면 된다.

filter 설명

setNow(res1.data.results.filter((m) => m.poster_path));

.filter()로 포스터 이미지(poster_path)가 있는 영화만 골라낸다. 포스터가 없으면 화면에 빈 카드가 생기기 때문이다.

4. 3단계 — 화면 렌더링

같은 App.jsx 파일에서, useEffect 블록 바로 아래에 이어서 작성한다. 이 부분은 "데이터가 아직 도착하지 않았는지 확인하고, 도착한 데이터를 하위 페이지에 택배처럼 보내주는" 역할이다. <>(Fragment, 프래그먼트)는 여러 요소를 감싸되 실제 HTML 태그를 추가하지 않는 투명 포장지이다.

  const loading = now === null || popular === null || topRated === null;
  const ctx = {
    now: now || [],
    popular: popular || [],
    topRated: topRated || [],
    loading,
  };

  return (
    <>
      <Header />
      <Outlet context={ctx} />
      <Footer />
    </>
  );
}

// Home.jsx에서 (7편에서 작성)
import { useOutletContext } from "react-router";

export function Home() {
  const { now, popular, topRated, loading } = useOutletContext();
}

export function Header() {
  return <header>헤더 (준비중)</header>;
}

export function Footer() {
  return <footer>푸터 (준비중)</footer>;
}

5. 전체 코드

import { useState, useEffect } from "react";
import { Outlet } from "react-router";
import { Header } from "./components/Header.jsx";
import { Footer } from "./components/Footer.jsx";
import api from "./api/axios";

export default function App() {
  const [now, setNow] = useState(null);
  const [popular, setPopular] = useState(null);
  const [topRated, setTopRated] = useState(null);

  async function loadMovie() {
    const [res1, res2, res3] = await Promise.all([
      api.get("movie/now_playing"),
      api.get("tv/popular"),
      api.get("movie/top_rated"),
    ]);
    setNow(res1.data.results.filter((m) => m.poster_path));
    setPopular(res2.data.results.filter((m) => m.poster_path));
    setTopRated(res3.data.results.filter((m) => m.poster_path));
  }

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

  const loading = now === null || popular === null || topRated === null;
  const ctx = {
    now: now || [],
    popular: popular || [],
    topRated: topRated || [],
    loading,
  };

  return (
    <>
      <Header />
      <Outlet context={ctx} />
      <Footer />
    </>
  );
}