React Router Dom

학습 목표

이 영상을 통해 React Router DOM 라이브러리를 사용하여 React 애플리케이션에서 페이지 라우팅을 구현하는 방법을 학습합니다. 사용자는 URL 변경에 따라 컴포넌트를 동적으로 렌더링하고, 페이지 간 전환을 자연스럽게 처리하는 방법을 이해하게 됩니다.

핵심 개념

• 싱글 페이지 애플리케이션 (SPA)의 한계: 여러 페이지로 구성된 웹사이트에서 특정 페이지 공유의 어려움과 새로고침 없이 페이지 전환의 필요성을 이해합니다.
• React Router DOM: SPA에서 페이지 라우팅을 가능하게 하는 라이브러리로, URL과 컴포넌트를 매핑하여 사용자 경험을 향상시킵니다.
• BrowserRouter: 브라우저의 History API를 활용하여 URL을 관리하고 애플리케이션의 현재 상태를 추적합니다.
• Routes 및 Route: 특정 URL 경로에 렌더링될 컴포넌트를 정의합니다. path 속성으로 URL을 지정하고 element 속성으로 해당 컴포넌트를 연결합니다.
• Link 컴포넌트: <a> 태그와 유사하게 작동하며, 페이지 새로고침 없이 애플리케이션 내 다른 경로로 이동할 수 있게 합니다. to 속성으로 이동할 경로를 지정합니다.
• useParams 훅: URL 경로에 포함된 동적 파라미터(예: /profile/:userId)를 추출하여 컴포넌트 내에서 사용할 수 있게 합니다.
• useNavigate 훅: 프로그래밍 방식으로 페이지 이동을 제어할 때 사용됩니다. 버튼 클릭 등 이벤트 핸들러 내에서 특정 경로로 사용자를 리디렉션하는 데 활용됩니다.
• NotFound (404) 페이지 처리: 정의되지 않은 URL로 접근했을 때 사용자에게 안내 메시지를 보여주고 홈 또는 다른 페이지로 이동할 수 있도록 처리하는 방법을 배웁니다.

공부 방향성

이 영상을 시청하기 전, React의 기본 컴포넌트 기반 아키텍처와 JSX 문법에 대한 이해가 필요합니다. 영상 시청 후에는 React Router DOM의 공식 문서를 참고하여 더 다양한 라우팅 기능(예: 중첩 라우팅, 보호된 라우트)을 학습하고, 실제 프로젝트에 적용해보는 연습을 하는 것이 좋습니다. 또한, 전역 상태 관리 라이브러리(Zustand, Recoil 등)와 연계하여 복잡한 애플리케이션의 상태 관리를 어떻게 효율적으로 할 수 있을지에 대한 학습으로 이어갈 수 있습니다.