React Route

yarn

먼저 react Route를 사용하려면

yarn add react-router-dom

명령어로 react-router-dom을 설치해줘야 함

사용법

완료가 되면 index.js파일을 다음과 같이 수정

import {BrowerRouter} from 'react-router-dom';
-------
  /대충 이러저런 문장들/
-------
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root'),
);

사용방법은 간단함.
먼저 다음과 같은 파일들을 생성
Home.js, About.js, Profile.js

그 다음, Home.js를 다음과 같이 작성

import React from 'react';

function Home() {
  return (
    <div>
      <h1>홈</h1>
      <p>이 곳은 홈입니다. 가장 먼저 보여지는 페이지입니다.</p>
    </div>
  );
}

export default Home;

그 후, About.js도 다음과 같이 작성

import React from 'react';

function About({location}) {
  return (
    <div>
      <h1>소개</h1>
      <p>이 프로젝트는 리액트 라우터 기초를 실습해보는 예제 프로젝트입니다.</p>
    </div>
  );
}

export default About;

다음과 같이 작성했으면 App.js를 다음과 같이 바꿔줌

import React from 'react';
import { Route, Link } from 'react-router-dom';
import About from './About';
import Home from './Home';
import Profile from './Profile';

function App() {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">홈</Link>
        </li>
        <li>
          <Link to="/about">소개</Link>
        </li>
      </ul>
      <hr />
      <Route path="/" component={Home} exact />
      <Route path="/about" component={About} />
    </div>
  );
}

export default App;

여기서 Route는 path를 통해 들어온 url에 어떤 component를 렌더링 해줄까를 정하는 태그임

component={}부분에서 {}에는 화면에 렌더링할 component즉, 파일명.js를 적어줌

이렇게 하고 yarn start를 누르면 3000번 포트로 서버를 돌렸다는 가정하에http://localhost:3000에서 Home에 적어놨던 화면들이 렌더링되는 모습을 볼 수 있음

문제는 http://localhost:3000/about인데 만약에 exact를 component={home}옆에 적어두지 않았다면 Home component가 /about에서도 같이 렌더링 되는 걸 알 수 있음

/about을 /가 포함하고 있다고 함 그래서 출력되는 것
따라서 제대로 정해진 화면만 출력하고 싶다면 exact 키워드를 사용
입력한 url이 반드시 path부분에 적혀있는 것과 일치한 component만 화면에 출력해달란 의미

<Link>는 <a>를 대신하는 태그
왜 <a> 대신 <Link>를 쓰냐면 <a>로 다른 페이지에 이동할 경우, 전부 다 리렌더링함. (실제로 크롬 개발자 도구를 열어서 Network 부분을 보면 <a>사용시 링크를 클릭하면 전부 다시 받아옴을 알 수 있음)

<Link>는 거의 리렌더링이 없다시피 함

파라미터와 쿼리

파라미터

파라미터는 /about같은 url에 /something하고 뭔가의 url을 더 추가해주는 것을 말함

넘겨주는 쪽에서는 /about/:username 같이 :와 value를 붙여서 보내줄 수 있음

<Route path="/about/:username" component={About} />

위처럼 쓰면 됨
그리고 받는 페이지인 About.js에서는

import React from 'react';

function About({match}) {
  const {username} = match.params;
  return (
    <div>
      <h1>소개</h1>
      <p>이 프로젝트는 리액트 라우터 기초를 실습해보는 예제 프로젝트입니다.</p>
    </div>
  );
}

export default About;

match.params를 이용해 :username에서 적어준 username을 const {username}으로 받아올 수 있음

파라미터의 용도는 아이디나 유저이름 같은 특정 데이터를 조회할 때 사용함
쿼리의 경우는 다양한 옵션을 줘서 조회할 때 사용을 많이 함(검색 같은)

import React from 'react';

const explain = {
  hello:{
	type:'greeting',
  	desc:'Hello world!'
  },
  bye:{
    type:'farewell',
    desc:'Good bye!'
  }
}
function About({match}) {
  const {username} = match.params;
  const doing = explain[username]; 
  return (
    <div>
      <h1>소개</h1>
      <p>이 프로젝트는 리액트 라우터 기초를 실습해보는 예제 프로젝트입니다.</p>
    <p>{username}님 {doing.desc}!</p>
	<p>type: {doing.type}</p>
    </div>
  );
}

export default About;

여기서

const explain = {
  hello:{
	type:'greeting',
    desc:'Hello world!'
  },
  bye:{
    type:'farewell',
    desc:'Good bye!'
  }
}

이 부분은 파라미터로 /about/hello나 /about/bye로 넘겨줘 렌더링 할 수 있게 해주는 객체임

  const {username} = match.params;
  const doing = explain[username]; 

이 부분에서 match.params를 통해 username을 받아오고 그 username은 hello나 bye가 될 것임
그럼 doing에는 about/hello면 hello가 가지는 객체 즉

{
  type:'greeting',
  desc:'Hello world!'
}

이 부분을 가져올 것이고, about/bye면,

{
  type:'farewell',
  desc:'Good bye!'
}

를 가져올 것임

    <p>{username}님 {doing.desc}!</p>
	<p>type: {doing.type}</p>

따라서 요부분에 출력되는 코드가
hello님 Hello world! type: greeting 또는
bye님 Good bye! type: farewell 둘 중 하나가 될 것임

  if (!doing) {
    return <div>존재하지 않는 사용자입니다.</div>;
  }

doing이 없다는 것은, explain[username]이 빈 값, 즉 객체 안에 존재하지 않음을 의미함 따라서 존재하지 않는다고 출력

파라미터를 여러개 쓰고 싶은 경우는
/about/:username/:nickname/:id 이런식으로 계속 넣어주면 됨
받을 땐 const {username, nickname, id} = match.params로 받아오면 됨

쿼리

쿼리는 먼저

yarn add qs

를 통해서 라이브러리를 가져와야 함 여기서 qs는 queryString의 약자
기존의 About.js코드를 다음과 같이 수정

import React from 'react';

function About({ location }) {
  console.log(location);
  return (
    <div>
      <h1>소개</h1>
      <p>이 프로젝트는 리액트 라우터 기초를 실습해보는 예제 프로젝트입니다.</p>
    </div>
  );
}

export default About;

location으로 받아오는 값을 console로 출력하면

{pathname: "/about", search: "", hash: "", state: undefined}
pathname: "/about"
search: ""
hash: ""
state: undefined
__proto__: Object

다음과 같은 값이 나옴, 여기서 url을 /about?a=1 로 바꿔서 enter를 눌러보면

{pathname: "/about", search: "", hash: "", state: undefined}
pathname: "/about"
search: "?a=1" >> 이 부분이 바뀜
hash: ""
state: undefined
__proto__: Object

search부분이 바뀌어서 나오는 것을 알 수 있음
근데 우리가 필요한 것은 a=1부분이지 ?는 필요가 없음 따라서 다음같은 코드를 추가로 삽입

const query = qs.parse(location.search, { ignoreQueryPrefix: true });

위처럼 qs.parse를 통해 location.search값을 객체로 parsing시켜주는데
{ ignoreQueryPrefix: true }를 넣어주면 자동으로 ?를 빼준체로 객체를 가져오게 됨

여러 개를 쿼리에 넣고 싶은 경우는
about?a=1&b=2&c=3같은 &(Ampersand)를 사용하면 됨

쓸 때는 query객체를 통해 a를 호출해야 하니까 query.a라고 쓰면 됨

주의할 점은 ?a=1같이 숫자를 건네주는 경우도 1은 문자열임
따라서, 숫자라고 생각해서 ?a=1&b=2로 받아주고
const num = qs.parse(location.search, {ignoreQueryPrefix:true});
한 다음

const c = num.a+num.b이런식으로 해주면 '1'+'2'라서 '12'가 됨
1+2라서 3이 되는게 아님

그럴 경우는 parseInt같은 문자열을 숫자로 변환해주는 함수 사용