[React] React Router 총정리

React Router는 내비게이션, 경로 관리, 동적 페이지 렌더링 등을 위해 사용한다.

React Router의 기능들에 대해 알아보겠다.

 

🔎 Link

사용 시기

• 내비게이션 바, 사이드 바, 메뉴 등에서 사용자가 클릭할 수 있는 정적인 링크 제공

특징

• JSX 문법으로 선언적(Declarative)으로 경로 정의
• a 태그와 유사하게 동작하여 SEO 친화적
  • a 태그와 유사하지만 페이지 리로드 없이 클라이언트 측 경로를 변경

예시 코드

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

const NavigationMenu = ({src, alt, text, width, to}: NavigationMenuProps) => {
  return (
    <Link to={to}>
      <p>{text}</p>
    </Link>
  );
};

 

🔎 useNavigate

사용 시기

• 사용자 인터랙션 후 특정 조건에 따라 페이지 이동할 때
• 폼 제출 후 성공적으로 처리된 경우 특정 페이지로 리디렉션할 때
• 특정 이벤트가 발생하여 페이지를 이동시킬 때

특징

• 명령적(Imperative)으로 경로 변경
• 함수 호출을 통해 프로그램적으로 경로 변경
• 검색 엔진이 함수 호출로 인한 페이지 이동을 추적하지 못함 (SEO 비효율)

예시 코드

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

const SomeComponent = () => {
  const navigate = useNavigate();

  const handleButtonClick = () => {
    navigate('/schedule');
  };

  return (
    <button onClickButton={handleButtonClick}>Go to Schedule</button>
  );
};

export default SomeComponent;

 

🔎 Link vs useNavigate

	Link 컴포넌트	useNavigate 훅
사용 방식	JSX로 선언적(Declarative)	함수 호출로 명령적(Imperative)
주 사용 시기	정적 링크, 네비게이션 바	프로그램적 경로 변경, 조건부 리디렉션
예시	Link	navigate("/path")
경로 변경 방식	사용자가 클릭하여 경로 변경	함수 호출을 통해 경로 변경

• 상황에 따라 적절한 방법을 선택해서 사용해야 한다

 

🔎 NavLink

• Link와 유사하며 추가적인 기능을 제공한다
• 웹의 현재 URL과 to가 가리키는 링크가 일치하면 스타일이 활성화되고 일치하지 않으면 비활성화된다
• NavLink의 className prop에서 함수 형태로 isActive를 사용할 수 있다

사용 예시

• 내비게이션 바에서 클릭한 메뉴에 하이라이트를 주고 싶을 때

예시 코드

<NavLink
  to={to}
  className={({isActive}) =>
    `${isActive ? 'text-black' : 'text-gray-200'}`
  }
>
  <p>{text}</p>
</NavLink>

 

🔎 동적 라우팅 (Dynamic Routing)

• 파라미터를 활용하여 특정 데이터를 동적으로 제공한다

사용 예시

• 게시글 상세조회에서 게시글 id에 따라 특정 게시글을 보여줄 때예시 코드

예시 코드

import {useParams} from 'react-router-dom';
const ArticleDetail = () => {
    const {articleId} = useParams();

    return <div>{id}</div>;
}

 

 

🔎 중첩 라우트 (Nested Routes)

• 레이아웃이 복잡할 때 중첩 라우트를 통해 라우팅을 깔끔하게 관리할 수 있다

사용 예시

• 대시보드 페이지에서 여러 개의 섹션을 관리할 때

예시 코드

import {Outlet, Link} from 'react-router-dom';

const Dashboard = () => {
  return (
    <div>
      <h1>Dashboard</h1>
      <nav>
        <Link to="profile">Profile</Link>
        <Link to="settings">Settings</Link>
      </nav>
      <Outlet />
    </div>
  );
};

const Profile = () => <div>Profile</div>;
const Settings = () => <div>Settings</div>;

 

에러 바운더리 (Error Boundary)

• Outlet을 사용하여 에러 바운더리를 적용할 수 있다
• yarn add react-router-boundary

예시 코드

import {Outlet} from 'react-router-dom';
import {ErrorBoundary} from 'react-error-boundary';
import NotFound from '@/pages/NotFound';

const Dashboard = () => {
  const handleError = () => {
    console.log('에러 발생');
  }
  
  return (
    <ErrorBoundary fallback={<NotFound />} onError={handleError}>
      <Outlet />
    </ErrorBoundary>
  );
};

export default Dashboard;

• ErrorBoundary
  • fallback:  에러가 발생했을 때 사용자에게 보여줄 컴포넌트
  • onError: 에러 발생 시 동작하는 함수이다
  • onSet: 에러가 발생한 컴포넌트를 리셋할 때 수행하는 함수이다
• Outlet
  • ErrorBoundary로 감싸서 중첩 라우트에서 발생하는 에러를 처리한다
  • 특정 라우트에서만 에러가 발생했을 때, 해당 부분만 에러 처리 컴포넌트를 보여주고 다른 부분은 정상적으로 동작하도록 한다

 

---