- 리액트 라우터는 싱글 페이지 애플리케이션(SPA)에서 페이지 이동을 효율적으로 관리하는 핵심 라이브러리입니다. 🚀
- 페이지 이동의 기본 개념은 '미리 정해진 길(라우트)'을 따라 '이동(내비게이트)'하는 것이며, 이는 내비게이션 시스템에 비유할 수 있습니다. 🗺️
- 라우트 정의는
Routes컴포넌트 안에Route컴포넌트를 사용하여path와 해당 경로에서 렌더링할element(React 컴포넌트)를 매핑합니다. 🛣️ - 페이지 이동 시
path파라미터나쿼리 스트링을 통해 데이터를 함께 전달할 수 있어, 동적인 콘텐츠 로딩이 가능합니다. 📦 BrowserRouter는 라우팅 기능을 활성화하기 위해 애플리케이션의 최상위 또는 라우팅이 필요한 부분을 감싸는 역할을 합니다. 🌐- 프로그래밍 방식의 페이지 이동은
useNavigate훅을 사용하여navigate('/경로')또는navigate(-1)(뒤로 가기)와 같이 구현합니다. ➡️ - 선언적 페이지 이동에는
Link컴포넌트를 사용하며, 일반<a>태그와 달리 전체 페이지 리로드 없이 필요한 부분만 갱신합니다. 🔗 NavLink컴포넌트는Link와 유사하지만, 현재 활성화된 경로에 따라 스타일을 동적으로 적용할 수 있는isActive등의 기능을 제공하여 내비게이션 메뉴 구현에 유용합니다. ✨- 리액트 라우터는 전체 페이지를 다시 로드하지 않고 필요한 부분만 교체하여 사용자 경험을 향상시키는 SPA의 핵심 원리를 구현합니다. 🔄
react-router-dom패키지를 설치하여 사용하며, 현재 강의에서는 버전 7을 기준으로 설명합니다. 🛠️
Recommanded Videos
