useLocation

useLocation 훅은 React Router에서 제공하는 훅으로, 현재의 위치(location) 객체를 가져오는 데 사용

이 객체는 URL, 쿼리 파라미터 및 상태와 같은 정보가 포함되어 있음

주로 라우팅과 관련된 정보에 접근하고, 특정 URL에 따라 컴포넌트를 조건부로 렌더링하거나 동작을 수행하는 데 유용

1. useLocation의 기본 사용법

1.1. 임포트

먼저, useLocation 훅을 사용할 컴포넌트에서 임포트

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

1.2. 사용 예시

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

const LocationDisplay = () => {
    const location = useLocation(); // 현재 위치 객체를 가져오기

    return (
        <div>
            <h2>현재 URL 경로: {location.pathname}</h2>
            <p>쿼리 문자열: {location.search}</p>
            <p>상태: {JSON.stringify(location.state)}</p>
        </div>
    );
};

export default LocationDisplay;

 

2. location 객체의 속성

useLocation 훅을 통해 얻은 location 객체는 다음과 같은 주요 속성을 포함

• pathname: 현재 URL의 경로를 나타내는 문자열. 예: /about, /products/123 등.
• search: 쿼리 문자열을 포함하는 문자열. URL의 ? 이후의 부분 . 예: ?id=1&name=John과 같은 형식.
• hash: URL의 해시 부분을 나타내는 문자열. 보통 페이지 내 특정 섹션으로의 링크에 사용됨. 예: #section1.
• state: 라우팅에 의해 전달된 상태 객체. Link 컴포넌트의 state 속성을 통해 전달된 데이터가 포함됨.

 

3. 활용 예시

• 조건부 렌더링: 현재 URL에 따라 특정 컴포넌트나 요소를 조건부로 렌더링할 수 있음

if (location.pathname === '/home') {
    return <HomeComponent />;
} else {
    return <OtherComponent />;
}

• 쿼리 파라미터 처리: URL의 쿼리 문자열을 분석하여 필요한 데이터를 가져오거나 필터링할 수 있음

const query = new URLSearchParams(location.search);
const id = query.get('id'); // ?id=1에서 id=1을 가져옴

 

 

 

 

useParams / useLocation/ URLSearchParams 차이

목적	URL의 동적 파라미터를 가져옴	현재 위치 객체를 가져옴	URL 쿼리 문자열을 쉽게 처리함
반환값	동적 파라미터 객체	위치 객체 (pathname, search, hash 포함)	쿼리 문자열을 조작할 수 있는 객체
사용법	const { paramName } = useParams();	const location = useLocation();	const query = new URLSearchParams(location.search);
주요 속성	- 동적 파라미터 이름과 값	- pathname: 현재 경로<br>- search: 쿼리 문자열<br>- hash: 해시<br>- state: 상태 정보	- get(name): 특정 파라미터 값 가져오기<br>- has(name): 특정 파라미터 존재 여부 확인<br>- set(name, value): 파라미터 값 설정
예시	const { id } = useParams();	const pathname = location.pathname;	const id = query.get('id');
주로 사용되는 상황	특정 리소스의 ID나 이름 등 URL에서 값을 추출할 때	현재 URL 정보 확인 및 조건부 렌더링할 때	URL 쿼리 파라미터를 읽거나 수정할 때

• useParams: URL 경로에서 동적 파라미터를 추출하는 데 사용
• useLocation: 현재 URL의 전체 정보 가져오는 데 사용
• URLSearchParams: URL의 쿼리 문자열을 쉽게 파싱하고 조작할 수 있도록 해주는 API