React Router 완벽 가이드 Link, Route, Navigate로 페이지 이동 구현하기

안녕하세요, 코딩하는곰입니다! 오늘은 React 개발에서 가장 핵심적인 기술 중 하나인 페이지 이동과 라우팅에 대해 깊이 있게 알아보겠습니다. React Router의 Link, Route, Navigate 컴포넌트를 활용하면 사용자 경험을 극대화하는 SPA(Single Page Application)를 구현할 수 있습니다. 20년 이상의 React 개발 경험을 바탕으로 실제 프로젝트에서 바로 적용할 수 있는 실용적인 팁과 함께 자세히 설명드리겠습니다.

React Router의 기본 개념과 설정 방법

React Router는 React 애플리케이션에서 클라이언트 사이드 라우팅을 구현하기 위한 표준 라이브러리입니다. 전통적인 멀티 페이지 애플리케이션과 달리 SPA는 페이지 전체를 새로고침하지 않고 필요한 부분만 동적으로 업데이트하여 더 빠르고 부드러운 사용자 경험을 제공합니다.

React Router 설치하기

가장 먼저 React Router를 프로젝트에 설치해야 합니다. 최신 버전인 v6를 기준으로 설명드리겠습니다.

npm install react-router-dom

BrowserRouter 설정

React Router를 사용하려면 먼저 BrowserRouter로 앱을 감싸야 합니다. 이는 HTML5 History API를 사용하여 URL과 UI를 동기화합니다.

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';
function Root() {
  return (
    <Router>
      <App />
    </Router>
  );
}
export default Root;

Route 컴포넌트의 기본 사용법

Route 컴포넌트는 특정 경로에 어떤 컴포넌트를 렌더링할지 정의하는 핵심 요소입니다. React Router v6에서는 Routes 컴포넌트로 여러 Route를 감싸는 방식으로 사용합니다.

import { Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
    </Routes>
  );
}

동적 라우팅 구현하기

콜론(:)을 사용하여 URL 파라미터를 정의할 수 있습니다. 이는 상품 상세 페이지나 사용자 프로필 페이지처럼 동적인 데이터를 처리할 때 매우 유용합니다.

<Route path="/user/:userId" element={<UserProfile />} />
<Route path="/product/:productId" element={<ProductDetail />} />

동적 파라미터는 useParams 훅을 통해 컴포넌트 내에서 접근할 수 있습니다.

import { useParams } from 'react-router-dom';
function UserProfile() {
  const { userId } = useParams();
  
  return (
    <div>
      <h2>사용자 프로필</h2>
      <p>사용자 ID: {userId}</p>
    </div>
  );
}

🔧 새로운 기술을 배우고 싶다면, (자바 기초) 산술 연산자 완전 정복 - 코딩하는곰의 자바 강의를 참고해보세요.

Link 컴포넌트: 선언적 네비게이션의 정석

Link 컴포넌트는 React Router에서 가장 기본적이면서도 중요한 네비게이션 컴포넌트입니다. HTML의 <a> 태그와 유사하게 동작하지만, 페이지 전체 새로고침 없이 클라이언트 사이드 라우팅을 수행합니다.

Link 컴포넌트 기본 사용법

import { Link } from 'react-router-dom';
function Navigation() {
  return (
    <nav>
      <Link to="/">홈</Link>
      <Link to="/about">소개</Link>
      <Link to="/contact">연락처</Link>
    </nav>
  );
}

Link 컴포넌트의 고급 기능

Link 컴포넌트는 단순한 경로 이동 이상의 다양한 기능을 제공합니다. 상대 경로와 절대 경로

// 절대 경로
<Link to="/about">소개 페이지</Link>
// 상대 경로 (현재 경로가 /user일 때)
<Link to="profile">프로필</Link> // /user/profile로 이동

상태 전달하기

<Link 
  to="/user" 
  state={{ from: 'homepage', timestamp: Date.now() }}
>
  사용자 페이지
</Link>

전달된 상태는 useLocation 훅으로 접근할 수 있습니다:

import { useLocation } from 'react-router-dom';
function UserPage() {
  const location = useLocation();
  console.log(location.state); // { from: 'homepage', timestamp: ... }
}

URL 쿼리 파라미터와 함께 사용하기

<Link to="/search?query=react&sort=date">React 검색 결과</Link>

활성 링크 스타일링

현재 경로와 일치하는 링크에 스타일을 적용하려면 NavLink 컴포넌트를 사용합니다.

import { NavLink } from 'react-router-dom';
function Navigation() {
  return (
    <nav>
      <NavLink 
        to="/" 
        style={({ isActive }) => ({
          color: isActive ? 'blue' : 'black',
          fontWeight: isActive ? 'bold' : 'normal'
        })}
      >
        홈
      </NavLink>
    </nav>
  );
}

Link 컴포넌트의 SEO 최적화

Link 컴포넌트는 검색 엔진 최적화에도 중요한 역할을 합니다. 적절한 anchor text와 의미 있는 URL 구조를 사용하면 크롤러가 사이트 구조를 더 잘 이해할 수 있습니다.

// 좋은 예: 의미 있는 anchor text 사용
<Link to="/react-tutorial">React 튜토리얼</Link>
// 나쁜 예: 의미 없는 anchor text
<Link to="/react-tutorial">여기를 클릭</Link>

최근 당첨번호와 통계를 한눈에 보고 싶다면, AI 번호 추천과 QR코드 확인이 가능한 지니로또AI를 설치해보세요.

Navigate와 useNavigate: 프로그래밍 방식 네비게이션

사용자 인터랙션에 반응하거나 특정 조건에서 자동으로 페이지를 이동시켜야 할 때는 프로그래밍 방식의 네비게이션이 필요합니다. React Router v6에서는 useNavigate 훅과 Navigate 컴포넌트를 제공합니다.

useNavigate 훅 기본 사용법

useNavigate 훅은 컴포넌트 내에서 프로그래밍 방식으로 네비게이션을 수행할 수 있는 함수를 반환합니다.

import { useNavigate } from 'react-router-dom';
function LoginForm() {
  const navigate = useNavigate();
  const handleLogin = async (email, password) => {
    try {
      await loginAPI(email, password);
      navigate('/dashboard'); // 로그인 성공 후 대시보드로 이동
    } catch (error) {
      console.error('로그인 실패:', error);
    }
  };
  return (
    <form onSubmit={handleLogin}>
      {/* 폼 내용 */}
    </form>
  );
}

useNavigate의 고급 기능

이전 페이지로 이동하기

function BackButton() {
  const navigate = useNavigate();
  const goBack = () => {
    navigate(-1); // history stack에서 한 단계 뒤로
  };
  return <button onClick={goBack}>뒤로가기</button>;
}

상태와 함께 이동하기

const navigate = useNavigate();
const handleSuccess = () => {
  navigate('/success', { 
    state: { 
      message: '작업이 성공적으로 완료되었습니다.',
      data: resultData 
    },
    replace: true // history stack에 새 항목을 추가하지 않음
  });
};

Navigate 컴포넌트: 조건부 리다이렉션

Navigate 컴포넌트는 렌더링되는 즉시 지정된 경로로 리다이렉션합니다. 주로 조건부 리다이렉션에 사용됩니다.

import { Navigate } from 'react-router-dom';
function Profile() {
  const { isAuthenticated } = useAuth();
  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }
  return <div>프로필 페이지</div>;
}

실제 시나리오별 useNavigate 활용 예제

폼 제출 후 리다이렉션

function ContactForm() {
  const navigate = useNavigate();
  const [isSubmitting, setIsSubmitting] = useState(false);
  const handleSubmit = async (formData) => {
    setIsSubmitting(true);
    try {
      await submitContactForm(formData);
      navigate('/thank-you', { 
        state: { message: '문의가 성공적으로 제출되었습니다.' } 
      });
    } catch (error) {
      console.error('제출 실패:', error);
    } finally {
      setIsSubmitting(false);
    }
  };
  return (
    // 폼 JSX
  );
}

인증된 라우트 보호하기

function ProtectedRoute({ children }) {
  const { user, loading } = useAuth();
  const navigate = useNavigate();
  useEffect(() => {
    if (!loading && !user) {
      navigate('/login', { 
        state: { from: location.pathname },
        replace: true 
      });
    }
  }, [user, loading, navigate]);
  if (loading) return <div>로딩 중...</div>;
  
  return user ? children : null;
}

useNavigate와 useEffect의 조합

네비게이션을 사이드 이펙트로 처리해야 할 때는 useEffect 내에서 useNavigate를 사용합니다.

function AutoRedirect() {
  const navigate = useNavigate();
  const [countdown, setCountdown] = useState(5);
  useEffect(() => {
    if (countdown > 0) {
      const timer = setTimeout(() => setCountdown(countdown - 1), 1000);
      return () => clearTimeout(timer);
    } else {
      navigate('/home');
    }
  }, [countdown, navigate]);
  return <div>{countdown}초 후 홈으로 이동합니다...</div>;
}

🎤 놓치면 아쉬운 대회와 전시 일정이 궁금하다면, 제35회율곡문화제를 참고해보세요.

React Router의 Link, Route, Navigate는 현대적인 React 웹 애플리케이션 개발에 필수적인 도구들입니다. Link 컴포넌트는 선언적이고 사용자 친화적인 네비게이션을, useNavigate와 Navigate 컴포넌트는 복잡한 비즈니스 로직에 대응하는 프로그래밍 방식의 네비게이션을 제공합니다. 이러한 도구들을 효과적으로 조합하면 사용자 경험을 크게 향상시키는 반응형 웹 애플리케이션을 구축할 수 있습니다. 실제 프로젝트에서는 라우트 보호, 코드 스플리팅, 지연 로딩 등 고급 패턴들과 함께 사용하면 더욱 강력한 애플리케이션을 개발할 수 있습니다. React Router의 세계는 여기서 끝이 아닙니다. 다음 시간에는 중첩 라우팅, 라우트 로더, 액션 등 더 고급 주제들을 다루어보겠습니다. 질문이 있으시면 댓글로 남겨주세요! 코딩하는곰이었습니다. 감사합니다!

로또 당첨 확률을 높이고 싶다면, AI 기반 번호 분석과 QR코드 스캔 기능을 제공하는 지니로또AI를 사용해보세요.