컴포넌트 분리의 필요성

1. 컴포넌트 분리의 필요성

React의 주요 장점 중 하나는 컴포넌트를 재사용할 수 있다는 것입니다. 코드가 한 파일에 너무 많이 모여있으면 유지보수가 어려워지므로, 기능별로 컴포넌트를 분리하는 것이 좋습니다.

Movie 컴포넌트 분리 과정:

• 영화 정보를 보여주는 코드를 별도의 Movie.js 파일로 분리
• 컴포넌트는 함수로 정의하고 export default Movie로 내보내기
• 원래 App.js에 있던 영화 렌더링 관련 코드를 Movie.js로 이동

2. Props 활용하기

컴포넌트가 분리되면 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해야 합니다. 이때 props를 사용합니다.

// App.js에서 Movie 컴포넌트로 데이터 전달
<Movie 
  key={movie.id}
  coverImg={movie.medium_cover_image} 
  title={movie.title}
  summary={movie.summary}
  genres={movie.genres}
/>

Props 이름 지정:

• API에서 받는 데이터의 이름(medium_cover_image)과 컴포넌트에서 사용하는 이름(coverImg)은 반드시 같을 필요가 없음
• 개발자가 원하는 대로 이름을 지정할 수 있음 (단, 일관성 유지가 중요)

3. PropTypes를 이용한 타입 검사

컴포넌트가 어떤 props를 받는지 명확하게 하기 위해 PropTypes를 사용합니다.

import PropTypes from "prop-types";

Movie.propTypes = {
  coverImg: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  summary: PropTypes.string.isRequired,
  genres: PropTypes.arrayOf(PropTypes.string).isRequired
};

이를 통해:

• 필요한 props가 무엇인지 문서화
• 잘못된 타입의 데이터가 전달되면 경고
• 코드의 안정성 향상

4. React Router 도입

React Router는 React 애플리케이션에서 페이지 전환(라우팅)을 구현하기 위한 라이브러리입니다.

설치:

npm install react-router-dom

라우터 구성을 위한 파일 구조:

src/
  ├── components/    # 재사용 가능한 컴포넌트
  │   └── Movie.js
  ├── routes/        # 페이지(라우트) 컴포넌트
  │   ├── Home.js    # 영화 목록 페이지
  │   └── Detail.js  # 영화 상세 페이지
  └── App.js         # 라우터 설정

코드 재구성:

1. App.js의 영화 목록 로딩 및 표시 코드를 Home.js로 이동
2. 영화 상세 페이지를 위한 Detail.js 생성
3. App.js는 이제 라우터 역할만 수행

5. 라우터의 개념

React Router의 핵심 개념은 URL에 따라 다른 컴포넌트를 렌더링하는 것입니다.

• 라우트(Route): URL 경로와 컴포넌트를 연결
• 브라우저 라우터(BrowserRouter): HTML5 History API를 사용하여 URL과 UI를 동기화
• 스위치(Switch) 또는 라우트(Routes): 매칭되는 첫 번째 라우트만 렌더링

예상되는 라우터 구성:

// App.js
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./routes/Home";
import Detail from "./routes/Detail";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/movies/:id" element={<Detail />} />
      </Routes>
    </BrowserRouter>
  );
}

6. 라우팅의 이점

• 사용자 경험 향상: 전체 페이지를 새로고침하지 않고 콘텐츠만 변경
• 코드 구조화: 각 페이지를 별도의 컴포넌트로 관리
• URL 기반 상태 관리: 북마크 가능, 뒤로가기/앞으로가기 지원
• SEO 최적화 가능: 각 페이지에 고유한 URL 부여

라우터를 사용하면 URL을 통해 애플리케이션의 다양한 화면을 쉽게 탐색할 수 있으며, 사용자가 특정 영화의 상세 정보를 보기 위해 /movies/123과 같은 URL로 이동할 수 있게 됩니다.