React Hook. useLocation 과 useParams 차이점 알아보기

먼저 useLocation 과 useParams 사용하기 위해서는 라우터 설치가 필수입니다.

 

npm install react-router-dom

useLocation() 사용 방법

1) useLocation을 import 합니다

import { useLocation } from 'react-router-dom';

 

2) 변수에 useLocation 정보를 담습니다.

const location = useLocation();

 

3) console.log에서 출력해보고, 원하는 정보를 가져다 사용하면 됩니다.

 

const location = useLocation();

useEffect(() => {
  console.log(location);
}, [ location ])

 

그러면 파라미터가 아닌 현재 페이지의 Pathname을 가져 올 수 있습니다.

 

 

이와 다르게 파라미터 정보를 가져와 활용하고 싶다면 useParams라는 훅을 사용하면 됩니다

 

먼저 알아 두어야 할 점은 

 

 

여기서 search 는 pathname, spiderman은 parameter 입니다.

 

useParmas 를 임포트 한후 변수에 담아 사용할 수 있습니다.

 

import React from 'react';
import { useParams } from 'react-router-dom';

const study = () => {
  let { params } = useParams();

  return (
    <div className="study">
      <p>현재 페이지의 파라미터는 { params } 입니다.</p>
    </div>
  )
}

export default study;

 

이렇게 코딩 했을때 나오는 메세지는

 

현재 페이지의 파라미터는 { params } 입니다. == 현재 페이지의 파라미터는 spiderman 입니다.