리액트 61~69강 정리

상위 컴포넌트를 memo를 사용하기 위해서는 자식 컴포넌트들도  memo를 적용 시켜야한다!

 

리액트 라우터

 

npm i react-router

npm i react-router-dom

둘다 같이 깔아줘야 웹에서 사용가능

 

리액트 라우터는 눈속임이다.

페이지가 여러개 있는게 아니라, 여러개 있는 척 하는 것이다.

다른페이지로 넘어가는건데 페이지가 실제로 존재하지않는다.

리액트 라우터가 가상으로 만들어놓은 페이지에 가는것!

 

서버에서 동작하는 것이 아님. 서버에서는 모른다. 

앞단 즉 프론트엔드 부분에서만 동작한다.

import React from 'react';
import { BrowserRouter, HashRouter } from 'react-router-dom';

const Games = () => {
    return (
        <BrowserRouter>
            <div>
                <Link to="/number-baseball"> 숫자야구 </Link>
                <Link to="/rock-scissors-paper"> 가위바위보 </Link>
                <Link to="/lotto-generator">로또</Link>
            </div>
            <div>
                <Route path="/number-baseball" component={NumberBaseball} />
                <Route path="/rock-scissors-paper" component={RSP} />
                <Route path="/lotto-generator" component={Lotto} />
            </div>
        </BrowserRouter>
    );
};

export default Games;

 

해시라우터( # )

SEO 할때 불이익을 받는다.

해시라우터인 경우 서버는 모르고 브라우저만 알고 있기 때문에 좋지 않다. 실무에서는 쓰이지않음.

(SEO가 서버의 라우팅을 보고 판단하기 때문)

 

 

 

출시, 배포 측면에서도 브라우저 라우터가 해시라우터 보다 낫다.

**단점 :  브라우저라우터에서 새로고침하면 뜨지 않는다.(서버에 알려주는 역할이 필요함)

**브라우저 라우터를 사용해도 SEO를 위해서 따로 세팅이 필요하다.

 

 

history : 페이지 넘나든 내역을 간직하고 있다. 다양한 메소드들이 있음. (go, goBack, goForward 등)

location : pathname이 들어있음.

match : route에 등록했던 주소와 일치하는가

 

브라우저의 history API와 리액트 라우터의 histroy API와는 다른것이다!!!

 

 

주소에 데이터를 전달하는 가장 쉬운방법

/game/number-baseball?query=10&hello=zerocho&bye=30

이런식으로 키와 값에 대한 정보로 전달.

 

this.props.location.serach.slice(1)  의미는 ?를 없애줌.

//주소 뒤에 쿼리문이 ?query=10&hello=zerocho&bye=react 일떄

let urlSearchparams = new URLSearchParams(this.props.location.search.slice(1));
console.log(urlSearchParams.get('hello')); // 의 결과는 zerocho

리액트에서는 쿼리스트링 해석하는것을 제공안해서 urlSearchparams를 사용하는것이 좋다.

 

route를 통해서 자식에게 데이터를 전달하는 방법

 

1) 컴포넌트를 사용해서 전달하는 방법

<Route path="/game/:name" component={() => <GamgeMatcher props=12345 />} />

 

2) render를 사용하는 방법 ( **추천**)

<Route path="/game/:name" render={(props) => <GamgeMatcher props={props.abc} />} />

 

<Switch> 를 사용하면 위에서부터 아래로 Route되어있는 것 중에 하나만 렌더링이 됨. (동시에 여러개 라우트가 뜨는걸 방지)

<Route exact> exact 속성이 붙으면, 진짜 주소가 정확하게 일치할때만 렌더링이 됨.