useLocation 상세 설명

useLocation 상세 설명

✅ 1. useLocation이란?

useLocation은 React Router에서 제공하는 훅(Hook)으로, 현재 URL의 정보를 가져올 때 사용됩니다.
이를 통해 현재 경로(pathname), URL 상태(state), 검색어(query string), 해시(hash) 등의 정보를 확인할 수 있습니다.

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

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

  console.log(location);
  
  return <div>현재 경로: {location.pathname}</div>;
}

✅ console.log(location);을 출력하면 다음과 같은 객체를 확인할 수 있습니다:

{
  pathname: "/mainpage",
  search: "?id=123&name=John", // URL의 쿼리 문자열
  hash: "#section2", // URL의 해시 값
  state: { key: "value" }, // navigate()로 전달된 state 값
  key: "abcd1234" // React Router의 내부 키 값 (페이지 이동 시 갱신됨)
}

---

✅ 2. useLocation이 반환하는 속성

속성 설명 예제 값

pathname	현재 경로(페이지)	"/mainpage"
search	URL의 쿼리 문자열	"?id=123&name=John"
hash	해시(스크롤 위치 이동에 사용됨)	"#section2"
state	navigate()로 전달된 상태 값	{ facility: "회의실 B208" }
key	React Router에서 내부적으로 사용하는 키 값	"abcd1234"

---

✅ 3. useLocation의 주요 사용법

🔹 (1) 현재 경로(pathname) 확인

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

function MyComponent() {
  const location = useLocation();
  return <p>현재 경로: {location.pathname}</p>;
}

➡️ 예제 결과: /mainpage 가 출력됨

---

🔹 (2) URL의 Query String(쿼리 문자열) 읽기

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

function MyComponent() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  
  const id = queryParams.get("id");
  const name = queryParams.get("name");

  return (
    <div>
      <p>ID: {id}</p>
      <p>Name: {name}</p>
    </div>
  );
}

예제 URL: http://localhost:3000/mainpage?id=123&name=John
➡️ 결과:

ID: 123
Name: John

📌 URLSearchParams를 사용하여 쉽게 쿼리 문자열을 파싱 가능!

---

🔹 (3) navigate()로 전달된 state 읽기

다른 페이지에서 state 값을 전달하고 이를 useLocation으로 받을 수 있습니다.

✅ (1) navigate()로 state 값 전달하기

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

function SendPage() {
  const navigate = useNavigate();

  const handleNavigate = () => {
    navigate('/mainpage', {
      state: { facility: '회의실 B208', date: '2025-03-01' }
    });
  };

  return <button onClick={handleNavigate}>예약 정보 보내기</button>;
}

✅ (2) useLocation()으로 state 값 받기

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

function ReceivePage() {
  const location = useLocation();
  const { facility, date } = location.state || {}; // state가 없으면 빈 객체 반환

  return (
    <div>
      <p>예약 시설: {facility}</p>
      <p>예약 날짜: {date}</p>
    </div>
  );
}

➡️ 결과:

예약 시설: 회의실 B208
예약 날짜: 2025-03-01

📌 useLocation().state를 통해 navigate()에서 전달한 데이터를 받아올 수 있음!

---

🔹 (4) 특정 해시(hash) 값 확인

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

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

  return <p>해시 값: {location.hash}</p>;
}

✅ 예제 URL: http://localhost:3000/mainpage#section2
➡️ 출력:

해시 값: #section2

📌 location.hash를 사용하면 특정 섹션(예: #section2)을 쉽게 감지 가능!

---

✅ 4. useLocation을 언제 사용해야 할까?

1. 현재 경로(pathname)를 기반으로 UI 변경이 필요할 때
   • 예: 특정 경로에서는 버튼을 숨기거나 스타일을 변경할 때
2. URL의 Query String을 읽어서 데이터를 가져와야 할 때
   • 예: ?id=123과 같은 쿼리 매개변수를 파싱할 때
3. 페이지 이동 시 navigate()로 전달한 state 값을 받아야 할 때
   • 예: 예약 페이지에서 입력한 정보를 다음 페이지로 전달할 때
4. 특정 해시(#hash) 값을 감지해서 UI를 변경할 때
   • 예: 해시 기반으로 특정 섹션으로 스크롤할 때

---

✅ 5. useLocation과 useEffect를 함께 사용하기

페이지가 변경될 때마다 특정 작업을 실행하고 싶다면 useEffect와 함께 사용하면 됩니다.

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

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

  useEffect(() => {
    console.log("페이지가 변경됨:", location.pathname);
  }, [location]); // location이 변경될 때 실행

  return <p>현재 경로: {location.pathname}</p>;
}

➡️ 페이지 이동 시 console.log()로 현재 경로 출력됨!

---

🎯 정리

기능 코드 예제 설명

pathname 확인	location.pathname	현재 경로 가져오기
쿼리 문자열(?id=123) 읽기	new URLSearchParams(location.search).get("id")	Query String 값 가져오기
navigate()로 전달된 state 값 읽기	location.state	페이지 이동 시 데이터 전달받기
특정 해시(#section) 확인	location.hash	해시 값 가져오기
페이지 변경 감지	useEffect(() => {}, [location])	페이지가 변경될 때 실행

---

🚀 결론

• useLocation은 현재 URL 정보(경로, 쿼리, 해시, state 등)를 가져오는 훅이다.
• navigate()로 데이터를 전달할 수 있고, 이를 useLocation().state로 받아올 수 있다.
• useEffect와 함께 사용하면 페이지 변경 감지가 가능하다.

이제 useLocation을 자유롭게 활용할 수 있을 거예요! 😊
더 궁금한 점 있으면 언제든지 질문해주세요! 🚀

 

✅ useLocation().state 값은 어디에 저장되는가?

useLocation().state로 전달되는 데이터는 React Router 내부의 메모리(history stack) 에 저장됩니다.
즉, 캐시나 로컬 스토리지, 세션 스토리지 등에 저장되지 않으며, 브라우저의 새로고침(F5)이나 직접 URL 입력 시 사라집니다.

---

📌 1. state 값은 navigate()를 통해 전달됨

React Router에서 state는 navigate()를 사용하여 다른 페이지로 이동할 때 함께 전달하는 데이터입니다.

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

function SendPage() {
  const navigate = useNavigate();

  const handleNavigate = () => {
    navigate('/mainpage', {
      state: { facility: '회의실 B208', date: '2025-03-01' }
    });
  };

  return <button onClick={handleNavigate}>예약 정보 보내기</button>;
}

위 코드를 실행하면 React Router의 history stack에 state 값이 함께 저장됩니다.

---

📌 2. state 값은 useLocation()을 통해 받을 수 있음

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

function ReceivePage() {
  const location = useLocation();
  console.log(location.state);

  return (
    <div>
      <p>예약 시설: {location.state?.facility}</p>
      <p>예약 날짜: {location.state?.date}</p>
    </div>
  );
}

✅ console.log(location.state);

{ facility: "회의실 B208", date: "2025-03-01" }

---

📌 3. state 값은 새로고침(F5) 시 사라짐

React Router의 state는 브라우저의 메모리에만 저장되므로,
✔ 새로고침(F5) 또는 직접 URL 입력 시 state 값은 유지되지 않습니다.

console.log(location.state); // 새로고침 후에는 null 또는 undefined

✅ 새로고침해도 유지하려면?

• localStorage 또는 sessionStorage에 저장해야 함.

// 새로고침해도 유지되도록 sessionStorage에 저장
useEffect(() => {
  if (location.state) {
    sessionStorage.setItem("reservationData", JSON.stringify(location.state));
  }
}, [location.state]);

// sessionStorage에서 불러오기
const savedState = JSON.parse(sessionStorage.getItem("reservationData"));

---

📌 4. state는 어디에 저장되나?

React Router는 내부적으로 history stack (브라우저 메모리) 을 사용하여 state 값을 저장합니다.
이는 브라우저 세션이 지속되는 동안만 유지되며, 새로고침하면 사라집니다.

🔹 비교: 다른 저장 방식과 차이

저장 방식 저장 위치 새로고침 영향 브라우저 종료 후 유지

useLocation().state	브라우저 메모리 (history stack)	❌ (사라짐)	❌ (사라짐)
sessionStorage	브라우저 세션	✅ (유지됨)	❌ (닫으면 사라짐)
localStorage	로컬 저장소	✅ (유지됨)	✅ (브라우저 닫아도 유지됨)

---

✅ 결론

1. useLocation().state 값은 React Router의 history stack(메모리)에 저장됨.
2. 새로고침(F5) 또는 브라우저 종료 시 사라짐.
3. 영구적으로 유지하려면 localStorage 또는 sessionStorage에 저장해야 함.

 

---

🔍 2. Vite, Next.js 등 일부 개발 환경에서 자동 sessionStorage 백업

• 일부 프레임워크(Vite, Next.js 등)에서는 새로고침 시 자동으로 state를 sessionStorage에 저장하고 복원하는 기능이 있음.
• 개발 환경(Vite Hot Module Replacement 등)에 따라 동작이 다를 수 있음.

---

🔍 3. 브라우저가 state를 내부적으로 캐싱하는 경우

• 크롬, 파이어폭스 등의 일부 브라우저에서는 이전 페이지 데이터를 보존하는 방식이 다름.
• 특히 **bfcache (Back-Forward Cache)**가 활성화된 경우, 이전 페이지 상태를 유지할 수 있음.

✅ 확인 방법

• 크롬 개발자 도구 → Application → Back/Forward Cache에서 확인 가능.

---

🔍 4. state가 sessionStorage 등에 저장된 경우

• sessionStorage에 state 값을 저장하고 새로고침 후 가져오는 로직이 포함되어 있으면 state가 유지됨.

✅ 이전 페이지에서 자동 저장하는 코드 예제

useEffect(() => {
  if (location.state) {
    sessionStorage.setItem("lastState", JSON.stringify(location.state));
  }
}, [location.state]);

const savedState = JSON.parse(sessionStorage.getItem("lastState"));

• 이렇게 하면 navigate()로 이동한 state가 sessionStorage에 저장되므로 새로고침해도 유지됨.

---

🎯 결론

원칙적으로 useLocation().state는 새로고침 시 사라지는 것이 정상이다.
하지만 아래의 이유로 유지될 수도 있다:

1. 뒤로 가기 / 앞으로 가기 (history stack 유지)
2. Vite 등 일부 개발 환경이 sessionStorage를 자동 백업하는 경우
3. 브라우저의 bfcache(Back-Forward Cache) 기능이 활성화된 경우
4. 수동으로 sessionStorage에 저장하여 복원하는 코드가 있는 경우