React Router

React Router는 리액트에서 네이게이션을 관리하는 라이브러리 입니다.

다양한 경로를 정의하고 그 경로에 따라 컴포넌트를 렌더링할 수 있게 해줍니다.

 

설치 방법

npm 사용	npm i react-router-dom
yarn 사용	yarn add react-router-dom

 

React Router의 기본 개념

1. BrowserRouter : 애플리케이션 전체를 감싸는 컴포넌트로 HTML5의 History API를 사용하여 URL을 관리합니다. 이 컴포넌트 안에서 라우팅이 이루어집니다.
2. Routes : 여러 개의 Route를 감싸는 컴포넌트 입니다. 각 Route를 그룹화 하고 관리합니다.
3. Route : 각 URL 경로에 해당하는 컴포넌트를 매핑할 때 사용합니다. 특정 경로에 들어가면 지정된 컴포넌트가 렌더링 됩니다.
4. Link : <a> 태그를 대체하여 SPA에서 페이지를 새로 고침하지 않고도 다른 경로로 이동할 수 있게 해줍니다.
5. Outlet : 중첩된 라우트를 처리할 때 사용됩니다. 부모 경로의 공통 레이아웃을 렌더링하고, 자식 경로에 해당하는 컴포넌트를 동적으로 출력할 수 있습니다.

React Router 예시 :

 

Route index element={<Main/>} 부분은 / 경로의 기본 자식 컴포넌트로 Main을 지정합니다.

index 속성은 부모 경로에서 기본적으로 렌더링되는 컴포넌트를 지정할 때 사용됩니다.

 

 

프로그램적 네비게이션 

React Router에서 네비게이션을 함수 호출로 제어할 수 있는 기능입니다.

useNavigete() 훅을 사용하여 버튼 클릭이나 특정 이벤트 시 페이지 이동을 처리할 수 있습니다.

프로그램적으로 페이지를 전환합니다. 특정 이벤트에 따라 경로를 이동하고 싶을 때 유용합니다.

 

Link 와 useNavigate의 차이

Link 특징:

• 페이지 새로고침 없이 경로 변경 : 기존의 HTML <a> 태그처럼 페이지를 새로고침 하지 않고도 경로를 변경합니다.
• 사용자 상호작용 기반 : 사용자가 클릭하면 해당 경로로 이동합니다.

useNavigate 특징:

• 프로그래밍적인 경로 변경 : 특정 조건이 충족되면 자동으로 경로를 변경할 수 있습니다.
• 이벤트 기반 : 사용자가 특정 버튼을 클릭하거나 조건을 만족할 때, 혹은 특정 로직에 의해 경로를 이동시킬 수 있습니다.

Link : 사용자가 직접 클릭하여 경로를 이동하는 데 사용됩니다. 주로 네비게이션 메뉴나 링크를 표시할 때 활용됩니다.

useNavigate : 코드 내에서 명령으로 경로를 변경할 때 사용됩니다. 주로 이벤트나 로직의 결과에 따라 자동으로 경로를 변경할 때 유용합니다.

 

 

404 페이지 처리 (Not Found Routes)

잘못된 URL로 접근했을 때 사용자에게 404 페이지를 보여줄 수 있도록 설정하는 방법 입니다.

모든 경로와 일치하지 않을 때 * 를 사용하여 처리할 수 있습니다.

 

* 는 모든 경로와 일치하지 않는 경우를 처리하는 역할을 합니다.

동적 라우팅 의 기본개념

URL의 일부를 변수처럼 사용해서 그 값에 따라 다른 내용을 보여주는 방식 예로 쇼핑몰에서 상품 상세 페이지를 생각하면 상품마다 고유한 ID가 있는데 그걸 URL에 받아와서 상품마다 다른 정보를 보여주는 방법

/products/1 = 1번 상품의 정보

/porudcts/2 = 2번 상품의 정보

 

이때 :id 라는 걸 설정해서 URL에서 그 값을 받아와서 사용함

 

useParams는 URL에 있는 :id 부분을 가져옵니다. 

/products/1 로 들어가면 id는 1이 되고 /products/2 로 들어가면 id는 2가 됩니다.

그러면 그 값에 맞는 데이터를 화면에 보여줄 수 있습니다.