React _ 라우팅 및 페이지 #2

React Router의 핵심 기능: NavLink, useNavigate, useParams 

React Router는 React 애플리케이션에서 동적인 라우팅을 구현하는 데 필수적인 도구다. 이번 글에서는 React Router의 주요 기능인 NavLink, useNavigate, 그리고 useParams를 활용해 라우팅을 효율적으로 설계하는 방법을 적어본다.

---

1. NavLink를 활용한 현재 위치 읽기

NavLink는 React Router에서 제공하는 컴포넌트로, 현재 사용자가 위치한 페이지를 쉽게 확인할 수 있도록 도와준다. 특히 isActive 값을 활용하면 현재 링크가 활성화된 상태인지 확인할 수 있으며, 이를 통해 동적으로 스타일을 적용할 수 있다.

기본 사용법

<NavLink
  to="/"
  className={({ isActive }) => (isActive ? "active" : undefined)}
  end>
  Home
</NavLink>

위 코드에서는 isActive 값이 true일 경우 "active" 클래스가 적용되고, 그렇지 않을 경우 undefined를 반환한다. 이를 통해 활성화된 링크에만 특정 스타일을 적용할 수 있다.

---

end 속성의 중요성

NavLink는 기본적으로 to로 설정된 경로가 현재 경로의 부분 경로와 일치할 때도 활성화 상태로 간주한다. 이를 방지하려면 end 속성을 사용해야 한다.

예시:

<NavLink
  to="/"
  className={({ isActive }) => (isActive ? "active" : undefined)}
  end>
  Home
</NavLink>

• end 속성을 사용하지 않은 경우: /products 경로에서도 /가 활성화 상태가 된다.
• end 속성을 사용한 경우: 정확히 / 경로일 때만 활성화 상태가 된다.

---

동적 경로와 NavLink

만약 동적인 경로가 포함된 경우, end 속성을 적절히 사용하지 않으면 의도치 않게 활성화 상태로 간주될 수 있다.

예시:

<NavLink to="/products" className={({ isActive }) => (isActive ? "active" : undefined)}>
  Products
</NavLink>

위 코드는 /products/item 경로에서도 활성화 상태가 된다. 이를 방지하려면 정확한 구분이 필요한 경로에 end 속성을 추가해야 한다.

---

2. useNavigate로 동적 라우팅 구현하기

useNavigate 훅은 컴포넌트 내부에서 동적으로 경로를 변경할 때 유용하다. 버튼 클릭, 이벤트 핸들링, 또는 특정 조건에서 경로를 변경해야 하는 경우에 사용한다.

기본 사용법

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

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

  function handleClick() {
    navigate("/products");
  }

  return (
    <div>
      <h1>Welcome to the Home Page</h1>
      <button onClick={handleClick}>Go to Products Page</button>
    </div>
  );
}

export default HomePage;

위 코드에서 navigate("/products")는 함수 호출을 통해 동적으로 /products 경로로 이동한다.

---

useNavigate 활용 사례

1. 로그인 만료 시 리디렉션: 로그인 상태가 만료되면 홈 페이지로 이동.
2. 로그아웃 처리: 로그아웃 후 특정 경로로 이동.
3. 조건부 이동: 특정 조건(예: 폼 검증 성공)에서 경로를 변경.

예시:

if (!isLoggedIn) {
  navigate("/login");
}

---

3. useParams로 동적 경로 처리하기

useParams 훅은 현재 경로에서 동적 경로 매개변수를 읽어오는 데 사용된다. 이는 URL의 일부로 전달된 데이터를 가져와 컴포넌트에서 활용할 수 있도록 해준다.

라우터 설정

const router = createBrowserRouter([
  {
    path: "/products/:productId",
    element: <ProductDetail />,
  },
]);

기본 사용법

import { useParams } from "react-router-dom";

function ProductDetail() {
  const { productId } = useParams();

  return (
    <div>
      <h1>Product Detail</h1>
      <p>Product ID: {productId}</p>
    </div>
  );
}

export default ProductDetail;

위 코드에서 useParams를 통해 현재 경로의 :productId 값을 읽어올 수 있다. 예를 들어, 경로가 /products/123인 경우 productId는 "123"이 된다.

---

실전 활용

1. API 데이터 가져오기:
   • useParams로 받은 ID를 기반으로 API 호출.
2. URL 기반 조건부 렌더링:
   • URL에 따라 컴포넌트 내용 변경.

예시:

function ProductDetail() {
  const { productId } = useParams();

  useEffect(() => {
    fetchProductData(productId);
  }, [productId]);

  return (
    <div>
      <h1>Product Detail for ID: {productId}</h1>
    </div>
  );
}

---

4. 세 가지 주요 기능 비교

기능 역할 사용 상황

NavLink	현재 활성화된 경로를 확인하고 스타일을 동적으로 적용	네비게이션 메뉴, 활성화된 링크 스타일링
useNavigate	이벤트 핸들링이나 함수 내부에서 동적으로 경로 이동	버튼 클릭, 조건부 경로 이동
useParams	URL의 동적 경로 매개변수를 읽어와 데이터나 UI 렌더링에 활용	상세 페이지, 동적 콘텐츠

---

5. 정리

React Router의 주요 기능인 NavLink, useNavigate, 그리고 useParams를 적절히 사용하면 네비게이션과 동적 경로 처리가 훨씬 더 간단해진다.

• **NavLink**는 현재 경로를 기준으로 활성화 상태를 동적으로 관리할 수 있다. isActive와 end 속성을 활용해 세부 스타일을 설정할 수 있다.
• **useNavigate**는 함수 호출을 통해 경로를 동적으로 변경할 때 매우 유용하다.
• **useParams**는 동적 경로 매개변수를 읽어와 URL 기반 데이터를 처리할 수 있다.

이 세 가지 기능을 조합하면 React Router를 활용한 효율적인 라우팅 설계가 가능하다. 복잡한 경로 구조에서도 정확한 라우팅과 동적인 UI를 구현할 수 있도록 이 기능들을 적극적으로 활용해보자!