React useLocation Hook 완벽 가이드: 페이지 위치 추적과 데이터 전달 (초보자용 2024)

React useLocation Hook 완벽 가이드: 페이지 위치 추적과 데이터 전달 (초보자용 2024)

이 글은 React Router의 useLocation Hook에 대한 완벽한 가이드입니다. 초보자도 쉽게 이해할 수 있는 예제 코드와 실제 활용 사례를 포함하고 있습니다. React 페이지 간 데이터 전달과 현재 위치 추적이 필요하신 분들을 위한 상세 설명서입니다.

📚 목차

1. 소개
2. 주요 기능과 속성
3. 실전 예제
4. 실무 활용
5. 문제 해결
6. 결론

소개

React Router v6에서 제공하는 useLocation Hook은 현재 페이지의 URL 정보를 실시간으로 추적하고 활용할 수 있게 해주는 강력한 도구입니다.

주요 특징

• 현재 페이지 URL 정보 실시간 접근
• 페이지 간 상태(state) 데이터 전달
• URL 쿼리 파라미터 분석
• 페이지 이동 히스토리 관리

기본 설치 및 세팅

# React Router 설치
npm install react-router-dom

# 또는 yarn을 사용하는 경우
yarn add react-router-dom

주요 기능과 속성

useLocation Hook이 제공하는 핵심 정보들을 자세히 살펴보겠습니다.

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

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

  return (
    <div>
      {/* 현재 경로 */}
      <p>현재 경로: {location.pathname}</p>

      {/* URL 쿼리 파라미터 */}
      <p>쿼리 문자열: {location.search}</p>

      {/* URL 해시 값 */}
      <p>해시: {location.hash}</p>

      {/* 페이지 간 전달된 상태 데이터 */}
      <p>전달된 데이터: {JSON.stringify(location.state)}</p>
    </div>
  );
}

실전 예제

실제 프로젝트에서 사용할 수 있는 상세한 예제 코드를 살펴보겠습니다.

기본적인 위치 추적

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

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

  // URL이 변경될 때마다 실행되는 효과
  React.useEffect(() => {
    console.log('현재 페이지:', location.pathname);
    // 페이지 분석 도구에 페이지 뷰 기록
    analytics.logPageView(location.pathname);
  }, [location]);

  return (
    <div>
      <h1>현재 페이지 위치</h1>
      <p>경로: {location.pathname}</p>
    </div>
  );
}

페이지 간 데이터 전달 예제

// 데이터를 보내는 페이지 (PageA)
import { useNavigate } from 'react-router-dom';

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

  const handleSubmit = (userData) => {
    navigate('/page-b', {
      state: {
        userInfo: userData,
        timestamp: new Date().toISOString()
      }
    });
  };

  return (
    <button onClick={() => handleSubmit({ name: '홍길동', age: 30 })}>
      다음 페이지로
    </button>
  );
}

// 데이터를 받는 페이지 (PageB)
function PageB() {
  const location = useLocation();
  const userInfo = location.state?.userInfo;

  return (
    <div>
      <h2>전달받은 사용자 정보</h2>
      <p>이름: {userInfo?.name}</p>
      <p>나이: {userInfo?.age}</p>
      <p>전달 시각: {location.state?.timestamp}</p>
    </div>
  );
}

실무 활용

useLocation Hook의 실제 활용 사례를 알아보겠습니다.

페이지 분석(Analytics) 구현

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

  React.useEffect(() => {
    // Google Analytics 페이지뷰 전송
    gtag('config', 'UA-XXXXXXXX-X', {
      page_path: location.pathname + location.search
    });
  }, [location]);

  return null;
}

조건부 리다이렉트

function AuthenticatedRoute() {
  const location = useLocation();
  const isLoggedIn = useAuth(); // 사용자 인증 상태 확인

  if (!isLoggedIn) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  return <Outlet />;
}

문제 해결

state 데이터 유실 문제

// 문제: 페이지 새로고침 시 state 데이터 사라짐
function SafeStateAccess() {
  const location = useLocation();

  // 안전한 state 접근 방법
  const userData = location.state?.userData ?? {
    name: '기본값',
    age: 0
  };

  return <div>{userData.name}</div>;
}

TypeScript에서 타입 안전하게 사용하기

interface LocationState {
  userData: {
    name: string;
    age: number;
  };
  timestamp: string;
}

function TypeSafePage() {
  const location = useLocation();
  const state = location.state as LocationState;

  return (
    <div>
      <p>이름: {state.userData.name}</p>
      <p>시각: {state.timestamp}</p>
    </div>
  );
}

결론

요약

• useLocation은 React Router의 필수 Hook 중 하나입니다.
• 현재 페이지 위치 추적과 데이터 전달에 매우 유용합니다.
• TypeScript와 함께 사용하면 더욱 안전한 코드를 작성할 수 있습니다.

성능 최적화 팁

1. 불필요한 리렌더링 방지를 위해 메모이제이션 활용
2. 큰 데이터는 state 대신 전역 상태 관리 도구 사용
3. location 객체 변화 감지 시 최적화된 useEffect 사용

관련 자료

• React Router 공식 문서
• React Router V6 업그레이드 가이드

태그

#React #ReactRouter #useLocation #리액트훅 #프론트엔드개발 #웹개발 #JavaScript #TypeScript #React라우터

---

💡 이 글이 도움이 되셨나요? 글 상단의 좋아요와 공유 버튼을 눌러주시면 감사하겠습니다.
더 많은 React 관련 글을 보고 싶으시다면 블로그 구독을 해주세요!