React

간단한 다중 페이지 앱 만들기

React Router의 핵심 컴포넌트와 훅을 사용해 정적/동적 라우팅을 설정하고, URL 파라미터와 쿼리 문자열로 데이터를 전달하며, 복잡한 UI를 위한 중첩 라우팅까지 이해하셨습니다. 이번 실습에서는 이 지식을 통합해 간단한 블로그 애플리케이션(Simple Blog Application)을 직접 구축해봅니다.

HomePage.js (기본 라우팅)와 PostListPage.js를 중심으로 간단한 다중 페이지 앱 만들기의 판단 흐름을 읽습니다.

1

준비 단계: 경로 우선순위 정리

준비 단계에서는 입력 분포 기준으로 우선순위를 잡습니다.

기본 라우팅
2

라우팅 화면용 전역 스타일 조정 (index.css)

블로그의 기본적인 레이아웃 및 폰트 스타일을 정의합니다.

동적 라우팅 (useParams)
3

내비게이션 바 (Navbar.js)

NavLink를 사용하여 블로그의 주요 페이지로 이동하는 링크를 만듭니다.

쿼리 문자열 (useSearchParams)