[React - 17] useLocation

React Router 라이브러리에서 제공하는 훅(hook) 중 하나로, 현재 페이지의 정보를 가져오는 데 사용됩니다.

이를 통해 현재 경로와 쿼리 파라미터 등의 정보를 쉽게 액세스할 수 있습니다.

 

총 5개의 키값을 가지고 있습니다.

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

const MyComponent = () => {
    const location = useLocation();

    return (
        <div>
            <h1>Current Location</h1>
            <p>Pathname: {location.pathname}</p>
            <p>Search: {location.search}</p>
            <p>Hash: {location.hash}</p>
            <p>Hash: {location.state}</p>
            <p>Hash: {location.key}</p>
        </div>
    );
};

1. pathname: 현재 URL의 경로 부분을 나타냅니다. 경로는 호스트 이름과 포트 번호 이후, 쿼리 파라미터와 해시 부분을 제외한 부분을 의미합니다. 예를 들어, 만약 현재 URL이 http://example.com/products?category=electronics#top라면 'pathname'은 /products가 될 것입니다.

2. search: 현재 URL에서 쿼리 파라미터를 나타냅니다. 쿼리 파라미터는 ?로 시작하여 key=value 형식으로 전달되며, 여러 개의 쿼리 파라미터는 &로 구분됩니다. 예를 들어, 위의 예시 URL에서 'search'는 ?category=electronics가 될 것입니다.

3. hash: 현재 URL에서 해시 부분을 나타냅니다. 해시 부분은 #로 시작하며, 주로 페이지 내에서 특정 섹션이나 위치를 가리킬 때 사용됩니다. 예를 들어, 위의 예시 URL에서 'hash'는 #top이 될 것입니다.

4. state: 이 프로퍼티는 라우팅된 컴포넌트로 전달되는 상태 객체를 나타냅니다.

이전 경로에서 새로운 경로로 이동할 때 상태를 함께 전달하고 싶을 때 사용될 수 있습니다.

예를 들어, 다른 컴포넌트로부터 전달받은 데이터를 포함할 수 있습니다.

5. key: 이 프로퍼티는 라우팅된 위치의 고유한 식별자를 나타냅니다. React Router는 각각의 라우트 변경에 대해 고유한 키를 생성하여 라우팅된 컴포넌트의 인스턴스를 추적합니다.