WATCHA PEDIA 클론코딩하기

https://pedia.watcha.com/ko-KR

왓챠피디아 - 영화, 책, TV 프로그램 추천 및 평가 서비스 6억 개의 평가를 기반으로 나에게 딱 맞는 영화, 드라마, 책을 추천받으세요. pedia.watcha.com

프로젝트 생성

React 생성하고자 하는 디렉토리에 React를 인스톨 해줍니다.

npx create_react_app ./ --template typescript

Router 설정.

react-router-dom 설치

react-router-dom은 요청에따라 페이지를 변환해주는 라이브러리이다.

npm i react-router-dom
npm i @types/react-router-dom -D

page 연결

src/App.tsx

BrowserRouter : 현재 위치의 URL을 저장해주는 역할, 최상위 태그로 생성한다.

Routes : Route를 구성

Route: path로 url을 설정, element로 해당 컴포넌트를 연결

import React from 'react'
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
import MainPage from './Pages/MainPage'
import TvPage from './Pages/TvPage'
import TvDetail from './Pages/TvDetail'
import MovieDetail from './Pages/MovieDetail'

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<MainPage />} />
        <Route path="/tv" element={<TvPage />} />
        <Route path="/movie/:id" element={<MovieDetail />} />
        <Route path="/tv/:id" element={<TvDetail />} />
      </Routes>
    </Router>
  )
}

export default App

src/Pages/MainPage.tsx

import React from 'react'

export default function MainPage() {
  return <div>메인</div>
}

src/Pages/MovieDetail.tsx

import React from 'react'

export default function MovieDetail() {
  return <div>영화 자세히보기</div>
}