Watcha-Pedia Ep.1

파일 생성

npx create-react-app ./ --template typescript 

--typescript가 붙어있으면 타입스크립트가 적용된 프로젝트가 생성된다

라우터 설정

npm i react-router-dom
npm i @types/react-router-dom -D // 타입스크립트 라우터 디펜던시 설치

react-router-dom 에서는
browserRouter, Router, Route, Switch를 사용하기 위해 설치한다
react-router-dom 버전 6에서는 Switch를 지원하지 않기 때문에

npm i react-router-dom@5.2.0

따로 버전 5로 다운그레이드를 시켜야한다.
React-Router-Dom 버전 6 이슈

App.tsx

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

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={MainPage} />
        <Route exact path="/tv" component={TvPage} />
        <Route exact path="/movie/:id" component={MovieDetail} />*
        <Route exact path="/tv/:id" component={TvDetail} />
      </Switch>
    </Router>
  );
}

export default App;

나머지 페이지는 동일

import React from 'react'

const MainPage: React.FC = ({children}) => {
    return (
        <div>Main Page</div> //children 들어갈 곳
    )
}

export default MainPage;

React.FC 사용 시
function 컴포넌트가 아닌 const React.Fc를 사용한다면
장점으로는 첫번째는 props 에 기본적으로 children이 들어간다.
(기본적으로 children이 들어간다는 것은 코드를 제한한다는 의미와 같다고 생각한다.)
두번째는 컴포넌트의 defaultProps, propTypes, contextTypes 를 설정 할 때 자동완성이 될 수 있다는 것 입니다.
단점으로는 컴포넌트의 props의 타입이 명확하지 않다.