TIL 17. React 4 - React Router, Sass

주민콩·2020년 11월 3일

Router를 들어가기 전에 앞서 CRA를 설치하고 어마어마하게 많은 파일이 들어있는것을 봤을겁니다!

그 중 package.json이라는 파일이 있는데 한마디로 요약하면 node modules에는 너무 많은 파일이 있기 때문에 데이터적이나 속도면에서 힘드므로 간략하게 무슨 속성으로 이러한 버전을 사용했다고 정리해놓은것 !

파일 안에서도 dependencies에 들어가려면 파일을 npm에서 --save 한 것 입니다!! 💁🏻‍♀️ 💁🏻‍♀️

그럼 이제 라우터라고 말하는 Router에 대해 알아보겠습니다.

1. spa

SPA (Single Page Application) - 하나의 페이지로 만든 어플리케이션

westagram을 만들면서 login.html, main.html 로 총 2개의 html 파일을 만들었습니다.

하지만 react project에서 .html파일은 몇 개? => 단 한 개

한 개의 웹페이지(html)안에서 여러 개의 페이지를 보여주는 방법은 => Routing

2. Routing

:: 다른 경로(주소)에 따라 다른 view를 보여주는 것 입니다. 👩🏻‍💻 👩🏻‍💻

여기서 프레임워크와 라이브러리의 차이점

:: 프레임워크는 뼈대의 의미로 그 곳에 내장되어있는것을 이용해 만드는 것이고
라이브러리는 그 기술을 이용해 무언가를 만드는 것이라고 말할 수 있습니다.

3. React Router

CRA (Creat React App)에 특별히 routing 할 수 있는 기능이 없어서, 가장 인기 있는 react-router를 설치해서 구현해야 합니다.

React Router 설치

npm install react-router-dom --save

Routes 컴포넌트 구현하기

import React from 'react';
import {				
  BrowserRouter as Router,
  Switch,
  Route,
} from 'react-router-dom';

import Login from './pages/Login/Login';
import Signup from './pages/Signup/Signup';
import Main from './pages/Main/Main';

class Routes extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={Login} />
					<Route exact path= "/signup" component={Signup} />
          <Route exact path="/main" component={Main} />
        </Switch>
      </Router>
    )
  }
}

export default Routes;

import {
  BrowserRouter as Router,
  Switch,
  Route,
} from 'react-router-dom';

이 말은 즉, react-router-dom에서 세가지 컴포넌트를 가져올 것이라는 뜻.

component={Login}
component={Signup}
component={Main}

이말은 즉, Login, Singup, Main 이라는 세 가지의 컴포넌트를 사용할 것이라는 뜻.

Route exact path="/"
Route exact path="/signup"
Route exact path="/main"

Route = 보여주고 싶은 컴포넌트를 연결해주기 위해 경로를 설정해주는 것입니다.

exact path = 정확하게 주소에 렌더하기 위한 경로

위를 보면, '/'도 있고 '/Signup'도 있습니다.
여기서 '/'가 겹치기 때문에 정확하게 쓰지 않으면 밑에 있는 경로가 렌더 될 수 있습니다.

index.js

ReactDOM.render(<Routes />, document.getElementById('root'));
아마 현재 화면에는 <APP />컴포넌트가 보여지고 있을겁니다.
Routing 기능을 적용하려면 <App />컴포넌트 대신에 routing을 설정한 컴포넌트 <Routes />로 변경해야 합니다.