[React] Day 5

Day 5

---

이번엔 React Router를 이용해서 특정 URL에서 특정 컴포넌트만 뿌려지도록 해볼게요.

Movie App은 페이지가 하나 뿐이라서 화면이 막 바뀌는 것은 볼 수 없겠지만.. /main으로 이동했을 때 메인 화면이 나오도록 만들어봅시다.

React Router

우선 파일들을 정리해줄게요.

src 폴더 밑에 두 개의 폴더를 만들어줍시다. 각각 Components와 Routes에요.

그 후 Components 폴더 안엔 App.js, Router.js를 넣어줍니다.
Routes 폴더엔 MainPage.js와 Movie.js를 넣을게요.

Router.js를 작성해봅시다!!

import React from "react";
import { HashRouter as Router, Route } from "react-router-dom";
import MainPage from "Routes/MainPage";

export default () => (
  <Router>
    <Route exact path="/main" component={MainPage} />
  </Router>
);

Route 태그에 props를 주고 Router 태그로 묶었어요.
path는 경로를 뜻하고, component는 뿌려질 컴포넌트인 것이 보이죠??

이렇게 라우터를 설정하면 특정 URL에 특정 컴포넌트를 뿌려줄 수 있어요.

뿐만 아니라!! 이 컴포넌트는 라우터에서 할당된 props를 가지게 됩니다.

이 속성들을 이용해 잘못된 URL로 들어왔을 시 홈으로 리다이렉트하고, 앞 / 뒤 페이지를 왔다갔다 하는 것이 가능해요.

마지막으로 App.js에 라우터를 추가해줍시다.

import React from "react";
import Router from "./Router";
import "../reset.css";

function App() {
  return (
    <>
      <Router />
    </>
  );
}

export default App;

이제부터 /main으로 접속해야만 우리의 페이지가 나타납니다!!

Header

페이지가 여러 개라면 헤더가 필수겠죠?
여기선 딱히 필요없겠지만 라우터를 쓴 김에 Link도 사용할게요.

Link 태그는 HTML의 <a> 태그와 유사한 기능을 합니다.

다음과 같이 작성할게요.

import React from "react";
import { Link } from "react-router-dom";

export default () => (
  <div>
    <ul>
      <li>
        <Link to="/main">Main</Link>
      </li>
    </ul>
  </div>
);

Main을 누르면 /main으로 보내줍니다. 여기로 가면 라우터에 의해서 우리의 페이지가 나타날거에요.

Link 태그를 가진 컴포넌트는 항상 라우터 밑에 있어야합니다!! 때문에 Router.js에 추가해줄게요.

export default () => (
  <Router>
    <Header />
    <Route exact path="/main" component={MainPage} />
  </Router>
);

CSS

리액트에서 css를 적용하는 가장 간단한 방법은 JS에서 했던 것처럼 따로 css 파일을 만들고 import 하는거에요.

물론 이 방법도 훌륭하지만, 저는 컴포넌트 구현 시 하나의 파일 안에 css도 같이 작성하고 싶습니다.

이 때 사용하는 것이 styled-component란 친구에요.
이런 식으로 사용할 수 있습니다.

const Division = styled.div`
  padding-top: 50px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  background-color: #121212;
`;

div 태그 + 스타일이 적용된 Division 태그를 만든 거에요.
사용할 때에는 컴포넌트처럼 선언해주면 됩니다.

render() {
  return (
    <Division>Hello World!</Division>
  )
}

완성!

Movie App을 아래의 기능을 사용하여 구현했습니다.

• React Router
  - 특정 URL에 어떤 컴포넌트를 뿌려줄 지 알려줌
• Axios
  - api 호출, 비동기로 데이터를 받아옴
• Container Presenter 패턴
  - 로직을 담당하는 Mainpage.js와 데이터를 받아 출력하는 Movie.js
  

CSS까지 마무리한 완성본입니다!!

처음으로 React를 써보고, 웹 페이지를 하나 만들어봤습니다.

HTML도 몰랐었는데.. 열심히 공부한 보람이 있네요 ㅠㅠㅠ

컨테이너-프레젠터 패턴으로 다양한 페이지를 구현해보고, 라우터를 이용해 뿌려주는 연습은 계속 해야할 것 같습니다.

첫 번째 리액트 앱이었습니다!! 감사합니다 😊