router (수정 필요)

rhdwnals1·7일 전
0

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를 보여주는 것 입니다. 👩🏻‍💻 👩🏻‍💻

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

  1. 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 (







)
}
}

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(, document.getElementById('root'));
아마 현재 화면에는 컴포넌트가 보여지고 있을겁니다.
Routing 기능을 적용하려면 컴포넌트 대신에 routing을 설정한 컴포넌트 로 변경해야 합니다.
Route 이동하는 방법

컴포넌트 사용하는 방법 = 주어진 주소로만 이동합니다. withRouterHOC 로 구현하는 방법 = 조건을 부여 할 수 있습니다. 컨벤션에 따라서는 withRouterHOC는 if else도 사용가능하지만 if if 도 사용가능하다. -삼항연산자 사용도 가능.
profile
love myself ᰔ

0개의 댓글