[React]useLocation

useLocation 훅 ⭐️

• useLocation 훅은 현재의 URL을 대표하는 location '객체' 를 반환한다.
• 객체안에는 pathname, search, hash, state, key 프로퍼티가 존재한다.
  • pathname : 현재 주소의 경로 (쿼리스트링, 해시 제외)
  • search : pathname 이후에 ? 부터의 문자열 (쿼리스트링)
  • hash : pathname 이후에 # 부터의 문자열 (해시)
  • state : location 객체로 화면이동을 시킬 때 코드 상으로 보내는 객체
  • key : history stack에서 location 객체를 찾기 위한 고유 키

 

사용법

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

const Home = () => {
	const location = useLocation();
    console.log(location);
}

• react-router-dom 에서 useLocation 을 꺼내와 사용하면 된다.
• 해당 훅을 불러와 변수에 넣어주고 콘솔로그로 찍어보면 프로퍼티가 담긴 location 객체가 나온다.

 

사용 예시

• 로케이션 훅을 불러와 변수에 넣어주고 pathname에 따른 아이콘 이미지를 변경 해주는 조건부 렌더링을 구현.

 

결과

• 성공했다! navLink 클릭 시 주어지는 active class를 이용한 방법도 있으니 상황에 따라 맞추어 사용하면 될 것 같다👍