TIL) 라우팅이란?

라우팅이란?

SPA방식. 서버에서 주는 html이 1개 뿐인 어플리케이션. 전통적 웹사이트는 페이지 이동 때마다 서버에서 html, css, js (=정적자원들) 을 내려준다면, SPA는 딱 한번만 정적자원을 받아옴.

 

왜 html을 하나만 줄까?

사용성 때문에. 페이지를 이동시마다 서버에서 주는 html로 화면을 바꾸다보면 상태유지가 어렵고, 바뀌지 않은 부분까지 새로 불러오니까 비효율적.  MPA (Multiple Page Application) 방식은 상태값 유지가 안됨. 유저가 불편함. 

SPA의 단점은 모든 정적자원을 다 가져오기 때문에 로딩속도가 느려질 수 있음. 그렇지만 이후 페이지를 왔다갔다 하는 속도는 빠름. 이미 자원을 다 가지고있기 때문에. 

 

react-router-dom package

설치하기 터미널 > 설치하고 싶은 폴더에 들어가서 ex) cd router-prac  >  yarn add react-router-dom

1) Index.js에 BrowserRouter 적용하기 -> 페이지가 실제로 주소창을 참고해서 이동되도록 해줌. 

2) 세부화면 만들기 : 컴포넌트 만들기

3) App.js에서 Route적용 : 실제로 페이지를 분기해보자

4) exact적용하기 :  <Route path="/" exact> /에 해당하는 것만 보여줘!

5) URL파라미터 사용 : 

• 웹사이트 주소에는 파라미터와 쿼리라는 게 있어요. 우리는 그 중 파라미터 사용법을 알아볼 거예요!
• 이렇게 생겼어요!
• → 파라미터: /cat/nabi    >>동적으로 붙음

1. useParam Hook 사용 방법 : 간단, 많은 정보 포함하지 않음

<Route path="/cat/:cat_name" exact> 후에 주소창에 /cat/nabi 

{useParams} import 후

const cat_name = useParams();

 console.log(cat_name); >> console창에 cat_name: nabi 나옴

 

2. 부모 컴포넌트에서 컴포넌트 속성을 바로 넘겨주는 방법 : 많은 정보 포함, 부모 컴포넌트에서 받아와야함

<Route path="/cat/:cat_name" exact component={Cat}>

 

하고 Cat component로 가서  console.log(props)

 

console창에서 params를 보면 cat_name: nabi 나옴

• → 쿼리: /cat?name=nabi  >>. ?key=value 값

6) 링크이동 

1. <Link/> 사용. html 중 a 태그와 비슷한 역할. 리액트 내에서 페이지 전환을 도와준다.

ex) <Link to="/dog">Dog으로 가기</Link>

2. history Hook 사용하기 - Link 컴포넌트를 클릭하지 않고 페이지를 전환

• props로 history 객체를 받아 이동하기

import React from "react";

const Dog = (props) => {
  // props의 history 객체를 살펴봅시다.
  console.log(props);

  // 그리고 history.push('/home')으로 페이지 이동도 해봐요!

  return (
    <div
      onClick={() => {
        props.history.push("/home");
      }}
    >
      강아지 화면이에요.
    </div>
  );
};

export default Dog;

• 꼭 props에서 받아오지 않아도, useHistory 훅을 사용하면 간단히 history 객/체에 접근할 수 있다

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

const Home = (props) => {
  let history = useHistory();
  return (
    <>
      <div>메인 화면이에요.</div>

      <button
        onClick={() => {
          history.push("/cat");
        }}
      >
        cat으로 가기
      </button>
    </>
  );
};

export default Home;