React Router 사용 가이드: 단일 페이지 애플리케이션에서의 라우팅 구현
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
React 개발자 (중간 수준)
- React SPA(단일 페이지 애플리케이션) 라우팅 구현에 관심 있는 개발자
react-router-dom사용법을 학습하고자 하는 초보 개발자- 프론트엔드 아키텍처 이해가 필요한 프로젝트 참여자
핵심 요약
- React Router는 SPA에서 URL 기반의 라우팅을 구현하기 위한 표준 라이브러리
BrowserRouter,Routes,Route,Link,Outlet등의 핵심 컴포넌트를 사용하여 페이지 전환 없이 UI 업데이트 가능react-router-dom은npm install react-router-dom또는yarn add react-router-dom으로 설치
섹션별 세부 요약
1. React Router 소개
- React SPA에서 URL 변경 없이 UI 동기화가 가능
- 전통적 웹사이트와 달리 페이지 리로드 없이 라우팅 지원
- Nested routing 및 Dynamic routing 지원
2. 설치 및 기본 설정
npm install react-router-dom또는yarn add react-router-dom으로 설치BrowserRouter를 앱 전체에 감싸는 구조로 구성Routes컨테이너 내부에Route컴포넌트 정의
3. 핵심 컴포넌트 설명
BrowserRouter: 브라우저의 history API를 사용한 라우팅 제공Routes:Route컴포넌트를 포함하는 컨테이너Route: URL과 컴포넌트 매핑 정의 (예:path="/"→Home)Link:태그 대체하여 페이지 리로드 방지Outlet: 부모 라우트 내에서 자식 라우트를 렌더링하는 플레이스홀더
4. 프로젝트 구조 예시
src/디렉토리 구조:
```bash
src/
├── App.js
├── pages/
│ ├── Home.js
│ ├── Blogs.js
│ ├── Contact.js
│ └── Layout.js
```
Layout.js에서Outlet을 사용하여 공통 레이아웃 정의Home,Blogs,Contact페이지는 각각/,/blogs,/contact경로에 매핑
5. 실행 예시
/→Home컴포넌트 렌더링/blogs→Blogs컴포넌트 렌더링/contact→Contact컴포넌트 렌더링- 모든 전환 과정에서 페이지 리로드 없이 UI 업데이트
결론
- React Router는 SPA에서 효율적인 라우팅 구현을 위한 필수 도구
BrowserRouter,Routes,Route,Link,Outlet등의 핵심 컴포넌트를 통해 동적인 UI 전환 가능- 프로젝트 구조를 정의할 때
Layout.js와Outlet을 활용하여 공통 레이아웃 관리를 추천 react-router-dom설치 후App.js에서BrowserRouter로 전체 앱 감싸는 방식으로 시작하세요.