React Router 기초부터 고급까지 (v6+)

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

- React 개발자 및 SPA(단일 페이지 애플리케이션) 구축을 위한 프론트엔드 개발자

- 중급~고급 수준의 학습자: 라우팅 개념, 컴포넌트 사용, 동적 라우팅, 네비게이션 처리 등 실무 적용이 필요한 분야

핵심 요약

• 는 브라우저 URL과 UI 동기화를 위해 HTML5 History API를 활용하는 핵심 라우터 제공자입니다.
• 는 URL에 맞는 첫 번째 만 렌더링하며, 기존 의 후속 버전입니다.
• 동적 라우팅은 useParams()와 /:parameter 형식으로 구현되며, 은 중첩 라우팅의 컨텐츠를 삽입하는 필수 요소입니다.

섹션별 세부 요약

1. Routing Basics

• SPA에서 페이지 이동 시 전체 페이지 리로드 없이 UI 동기화 가능
• React는 단일 index.html 파일로 동작하며, URL에 따라 다른 컴포넌트 렌더링
• React Router는 URL 기반 네비게이션을 지원하며, 서버 리로드 없이 클라이언트 측 이동 가능

1. Core Components

- 라우팅을 활성화하는 최상위 컴포넌트

- URL 변경 시 UI 동기화를 위해 HTML5 History API 사용

- 없으면 라우팅이 작동하지 않음

- 정의를 담는 컨테이너

- URL과 일치하는 첫 번째 만 렌더링

- 기존 의 후속 버전

- URL 경로와 특정 컴포넌트 매핑

- index 속성으로 기본 라우트 정의

- path="*"로 404 처리 가능

1. Nested Routes

• /dashboard/profile과 같은 중첩 경로를 위해 부모 내 자식 정의
• 은 부모 라우트 컴포넌트 내에서 자식 라우트의 컨텐츠 렌더링 위치
• 공통 UI 요소 (네비게이션, 푸터 등)를 부모에 정의하여 재사용 가능한 레이아웃 구현

1. Dynamic Routes

• /:productId 형식으로 변수 URL 처리 가능
• useParams() 훅으로 URL 파라미터 추출 (예: productId)
• 및 는 클라이언트 측 이동 시 서버 리로드 없이 URL 변경

1. Navigation with Hooks

• useNavigate() 훅으로 프로그래밍 방식의 이동 (예: 폼 제출 후 /about 이동)
• 컴포넌트로 인증 체크 등 조건에 따른 리다이렉트

- replace 속성으로 히스토리 스택에 이전 라우트 대체

1. Traditional vs. React Router Structure

- 기존 구조: App 컴포넌트 내 모든 컴포넌트 직접 렌더링

- React Router 구조: , , 로 구성하고, 필요한 라우트만 렌더링

- 장점: 성능 개선 (불필요한 컴포넌트 로딩 감소), 사용자 경험 향상 (스무스한 이동)

결론

- 는 라우팅의 필수 조건이며, 은 중첩 레이아웃 구현 핵심

- 404 처리는 path="*"로, 동적 라우팅은 useParams()와 /:parameter 활용

- useNavigate()와 를 통해 인증/폼 제출 후 이동 가능

- SPA 구조에서 React Router는 성능과 사용자 경험을 극대화하는 핵심 도구입니다.