React7일차-React router dom3

오늘은 주소뒤에 ?붙는 거에 대해 알아보겟습니다.  우선 이번과정은 페이지를 만드는건 딱히 필요가 없습니다.

하지만 ?뒤에 붙은걸 가져올때 유용하겠죠 ㅎㅎ 시작해보겠습니다.

저번에 했던 폴더에서 vscode 열고 터미널에npm i query-string 으로 설치 해줄께요

전

후

이번에는 About 페이지를  기준으로 할거에요 src/page/About.jsx로 가서 젤위에

import queryString from 'query-string'
import { useLocation } from "react-router-dom";

추가 해주고

return 위에

const { search } = useLocation();
const name = queryString.parse(search).name;

추가

return 내부를 

(
    <div>
      <h2>About 페이지 입니다.</h2>
      {name && <p>이름은{name}입니다.</p>}
    </div>
  )

이렇게 바꺼주겠습니다.

이제 이렇게 했으면 설명을 위해 저는 npm start해서 

http://localhost:3000/about?name=hello여기로 이동하고

 console.log(useLocation());

  console.log(queryString.parse(search));

이거두개를 찍어보겠습니다

console.log(useLocation());

 

 

console . log ( useLocation ());

useLocation은 hahs key pathname 여러가지 있는데 우리가 찾는건 search에 있습니다.

그래서 const { search } = useLocation(); 여기서 usLocation의 search요소를 뽑아내서 search라는 이름으로 저장했습니다.

그래서 console.log(search)하면 ?name=hello이렇게 나옵니다. 대충 뽑았는데 뭔가 ? 있어서 데이터로 쓰기 애매할거입니다. 그래서 저 ?를 없애기위제 저희가 queryString을 다운받아서 쓰고있습니다 이제console.log(queryString.parse(search)); 이걸 알아보겠습니다. 

console . log ( queryString . parse ( search ))

자 저렇게 name이라는 변수에 hello가 저장되있습니다.

console . log ( queryString . parse ( search ).name)을 찍어보니 hello가 나옵니다 

즉 우리는 const name = queryString.parse(search).name; 여기서 name이라는 변수에hello를 저장햇습니다.

name:hello 이렇게 되있을때 name은 key값이라고 부르고 hello는 value 값이라고 부릅니다 ㅎㅎ

이렇게 ?뒤에 붙는 데이터를 가져오는것을 알아봣습니다.