본문 바로가기

Routing

React 앱에서 브라우저 히스토리 API 활용하기 SPA에서 URL은 상태 그 자체입니다. History API(pushState/replaceState/popstate)를 직접 다루면 라우팅, 쿼리 파라미터, 스크롤 복원, 애널리틱스까지 가볍게 제어할 수 있습니다. 이 글은 React 앱에서 History API를 실무적으로 활용하는 방법을 정리합니다.1. 핵심 개념 요약- pushState: URL 변경 + 기록 추가(뒤로가기 가능)입니다.- replaceState: 현재 기록 교체입니다.- popstate: 뒤/앞으로 이동 시 발생하는 이벤트입니다.- 같은 오리진 내에서만 동작합니다. 서버는 모든 경로를 index.html로 리라이트해야 새로고침 404를 피할 수 있습니다.2. 최소 예제: URL만 바꾸고 화면은 React가 렌더// URL을 /p.. 더보기
React Router v6의 최신 기능과 사용법 React Router v6는 선언적 라우팅을 단순화하고, 데이터 로딩/변경을 라우트 계층으로 끌어올리는 Data Router 기능(v6.4+)을 도입했습니다. 이 글은 실무에서 바로 쓸 수 있는 최신 v6 사용법과 베스트 프랙티스를 정리합니다.1. v6 핵심 변화 한눈에 보기- Switch → Routes, Redirect → Navigate, exact 제거, component/render → element로 변경되었습니다.- 중첩 라우팅 기본 탑재, 상대 경로 네비게이션 개선, 레이아웃은 Outlet으로 구성합니다.- Data Router(createBrowserRouter, loader, action, errorElement, useLoaderData, useNavigation, defer/Awa.. 더보기

티스토리툴바