[React] 리액트 훅스(3) - useLocation, useNaviation

🚗 useLocation

리액트 훅스에서 useLocation은 현재의 URL을 대표하는 location 객체를 반환한다.

 

이전 블로그에서 확인했던 것과 같이 URL이 바뀔 때마다 새로운 location을 반환하는 useState처럼 생각할 수 있다.

 

새로운 페이지가 로드될 때마다 web analytics tool(웹 분석 도구)를 사용하는 새로운 "페이지 모습"의 이벤트를 작동시키려는 상황에서 유용하게 사용할 수 있다.

 

이때 location 객체는 아래와 같다.

 

[Chat GPT]

• pathname: URL에서 도메인 뒤의 경로를 나타냅니다. 예를 들어, URL이 http://example.com/about인 경우, pathname은 /about이 됩니다.
• search: URL의 쿼리 스트링을 나타냅니다. 예를 들어, http://example.com/about?name=John&age=30의 경우, search는 ?name=John&age=30이 됩니다.
• hash: URL의 해시(fragment) 부분을 나타냅니다. 예를 들어, http://example.com/about#team의 경우, hash는 #team이 됩니다.
• state: 페이지로의 이동 시에 Link나 navigate 함수를 통해 전달된 상태(state)를 나타냅니다. 이는 페이지 이동 시 추가적인 데이터를 전달하고자 할 때 유용합니다. state는 어떤 JavaScript 객체도 될 수 있으며, 이동한 페이지에서만 접근 가능합니다.

즉, 현재 브라우저의 URL에 대한 정보를 포함한다는 것이다.

 

이 객체는 경로(pathname), 검색 쿼리(search), 상태(state), 해시(hash)등의 속성을 포함한다.

 

useLocate훅을 사용하기 위해서는 React Router에서 이를 임포트 해야한다.

 

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

 

location객체를 사용하기 위해서 현재 브라우저의 경로를 얻어오기 위해 다음과 같이 작성할 수 있다.

 

const location = useLocation();

const path = location.pathname;

 

이후 해당 path의 변화가 생길 때 어떠한 동작을 하기 위해서는 다음과 작성하면 된다.

 

if (path === '/') {
	// ~
} else if (path === '/champAnalyze') {
	// ~
} else {
	// ~
}

 

 

 

 

🚓 useNavigate

useNavigate는 React Router에서 라우팅을 수행하기 위해 사용된다.

 

이 훅을 이용하면 컴포넌트 내에서 사용자를 다른 경로로 리디렉션 하거나, 이전 페이지로 돌아가게 하는 등의 라우팅 관련 작업을 수행 할 수 있다.

 

마찬가지로 useNavgiate를 사용하기 위해서는 React Router에서 이를 임포트해야한다.

 

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

 

 

그리고 컴포넌트에서 useNavigate를 호출하여 navigate함수를 얻는다.

 

이후 =특정 경로로 이동하기 위해 navigate함수에 경로를 문자열로 전달하면 된다.

 

const navigate = useNaviate();

navigate('/메인');

 

이를 이용하여 메뉴를 클릭했을 때 페이지를 이동하도록 개발을 진행해보겠다.

 

 

 

아래의 링크에서 이어서 진행된다.

 

https://2t-hong.tistory.com/177

[LOLPAGO] React 설치 및 Header 구성(4)