[React] React Router 개념

React 는 기본적으로 SPA (Single Page Application)로 하나의 HTML만 로드된 상태에서 페이지를 바꾸는 것 처럼 동작한다.

그러나 브라우저의 주소(URL)에 따라 다른 화면을 보여주는 기능은 제공되지 않는다.

 

그렇기에 React Router를 통해 페이지 새로고침 없이 URL 변경 및 해당하는 컴포넌트를 렌더링하는 것이다.

 

+)

기본적으로 HTML의 <a> 태그를 사용하면 클릭할 때마다 페이지가 새로고침된다. → <Link /> 대체

해당 방식은 SSR(서버 사이드 렌더링)에서는 괜찮으나 React와 같은 CSR(클라이언트 사이드 렌더링)에서는 비효율적이다.

React는 컴포넌트 기반 UI를 사용하기 때문에 전체 페이지를 로드하는 것이 아닌 필요한 부분만 변경하면 된다.

 

React Router?

 

1. 클라이언트 사이드 라우팅 지원

→ 새로고침 없이 빠르게 페이지 이동 가능

2. SPA 에서 URL 관리 가능

3. 동적 라우팅 및 중첩 라우팅 지원

4. 네비게이션 기능 제공 (ex: useNavigate) 

---

1. React Router 설치

npm install react-router-dom

package.json에 위와 같이 들어와 있다면 성공!

---

2. 라우팅 설정

라우팅을 적용하려면 react-router-dom의 BrowserRouter, Routes, Route를 사용한다.

✅ BrowserRouter: 라우터를 감싸주는 최상위 컴포넌트

✅ Routes: 여러 개의 Route를 감싸는 역할

✅ Route: path에 해당하는 경로로 접근할 경우 element 렌더링

위와 같이 적용할 경우, 기본 경로는 <Home /> , url에 /about 붙이면 <About />으로 이동한다.

 

<Route path={"*"} element={<h1>잘못된 경로</h1>} /> 을 추가하면

설정 경로 외 다른 경로 이동시 이동한다.

 

Route → URL에 따라 컴포넌트 렌더링

 

+)

<BrowserRouter>는 App.jsx안이 아닌 index.js 혹은 main.jsx에서 감싸는 것이 더 깔끔하다.

위처럼 설정해놓으면 더 이상 App.js에 BrowerRouter를 감싸지 않아도 된다.

---

3. Link

클릭하면 전체를 새로고침하는 <a> 태그 대신 <Link> 혹은 <NavLink>를 사용하면 새로고침 없이 이동이 가능하다.

✅ Link: to 속성에 경로 설정 시 해당 페이지로 이동

✅ NavLink: 현재 활성화된 링크에 스타일 부여 가능

클릭해보면 새로고침 없이 페이지가 렌더링되는 것을 확인할 수 있다.

 

<NavLink />에서 스타일 적용할 때 사용한 isActive는 NavLink가 갖고 있는 속성으로

해당 컴포넌트가 활성화될 때 실행된다.

 

사용자가 클릭할 때 페이지를 이동하는 기능으로

네이베기션 바, 메뉴에 주로 사용된다.

---

4. 중첩 라우팅 Outlet

부모 컴포넌트에서 Outlet을 사용하여 자식 컴포넌틀를 렌더링할 위치를 정할 수 있다.

✅ Outlet: 중첩 라우팅(Nested Routes)에서 자식 컴포넌트가 렌더링될 위치를 정하는 역할

→ 중첩된 라우트 쉽게 관리 가능, 레이아웃 재사용 가능, 부모 컴포넌트 그대로 유지하면서 자식 컴포넌트만 변경 가능

App.jsx와 Intro.jsx를 위와 같이 설정할 경우, <Rout path={"/" element={<Intro />}}> 안에 있는 라우터는 모두

<Intro />의 <Outlet />에 해당한다.

 

✅ index : 맨 처음 접속 시 보이는 페이지 → index 기입 후 element 설정

---

5. 동적 라우팅 (파라미터 사용)

✅ 동적 라우팅 : URL에 변수를 넣어 페이지를 동적으로 생성하는 방식

→ 같은 컴포넌트를 사용하면서 URL 값에 따라 다른 데이터 보여줄 때 사용

 

예를 들어, 블로그 게시글의 경우 /posts/1, /posts/2 ... 이런 식으로 URL의 특정 값만 다르게 하여 같은 페이지를 여러 개 만드는 경우

URL 파라미터를 활용한 동적 라우팅이 필요하다.

 

실제 프로젝트에서 백엔드 API에서 데이터를 가져올 때 사용하였다.

위 App.js에 코드를 추가한다.

✅ useParams(): 경로(라우트) 파라미터를 가져옴

url 에 /param1/1 를 입력하면 위와 같은 창이 뜬다.

 

사용자 프로필(/users/:username),

게시글 상세 페이지(/posts/:postId),

상품 상세 페이지(/products/:productId)

에서 주로 사용하면 좋다.

✅ useSearchParams: 파라미터 뒤 URL 쿼리스트링 가져옴

✅ searchParams.get(key) : 특정 key의 value를 가져오는 메서드로 해당 key의 value가 두 개 이상이면 처음 값을 반환

url에 /param2/?id=11&name=kkk 를 입력하면 위와 같이 뜨는 것을 볼 수 있다.

 

검색 결과 페이지 (/search?keyword=react&page=2),

필터링 기능 (/products?category=shoes&sort=price),

다중 선택 옵션 (/users?role=admin&status=active)

에서 주로 사용하면 좋다.

---

6. useNavigate

<Link>와 마찬가지로 페이지 이동을 위한 기능이나

<a> 태그처럼 사용하여 이동하는 것이 아닌 JS 코드에서 프로그래밍 적으로 이동하는 기능이다.

App.jsx에 추가

Intro.jsx에 추가

NaviComp1.jsx를 위와 같이 작성할 경우

/navi 경로에서 /param2/?id=20&name=aaa 로 이동하는 것을 확인할 수 있다.

 

이벤트(버튼 클릭, 폼 제출 등) 발생 시 이동 가능하며,

조건문을 사용한 동적이동과 로그인 후 특정 페이지로 리디렉트할 때 유용하다.