React - router

 

이번 포스팅에서는 리액트에서의 라우팅에 대해 공부해 보려고 한다.

---

 

리액트를 사용하면 하나의 페이지 안에 있는 요소를 여러 컴포넌트로 쪼개어 렌더링할 수 있다. 따라서 다양한 컴포넌트를 하나의 페이지에서 활용한다면, 하나의 웹페이지로도 웹사이트를 개발할 수 있을 것이다.

 

 

SPA(Single Page Application)

• 단일 웹페이지로 동작하는 애플리케이션
• 브라우저에서 자바스크립트를 이용해 단일 웹페이지 상의 HTML 요소를 동적으로 생성 및 조작
• 검색 엔진 최적화(SEO)에 적합하지는 X
• React, Svelte, Vue.js와 같은 라이브러리로 개발 가능

 

 

 

 

 

리액트에서 라우팅은 어떻게 이루어질까?

먼저, 라우팅이란 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것을 뜻한다.

리액트에서는 다른 페이지로 이동하기보다는, 주소별로 다른 컴포넌트를 보여주기 위해 라우팅을 하며, 라우팅을 하기 위해서 React Router 라이브러리가 가장 많이 사용된다.

 

 

 

리액트 라우터(React Router)

• 개발자가 주소별로 다른 컴포넌트를 보여주기 위해 사용되는 라이브러리
• 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트 제공
• 주요 컴포넌트
  • BrowserRouter
  • Routes
  • Route
  • Link
  • createBrowserRouter
• 별도로 설치 필요
  • npm install react-router-dom@6  (@뒤는 버전을 뜻함: 버전6)

 

 

이제, 리액트 라우터의 주요 컴포넌트인 BrowserRouter, Routes, Route, Link, createBrowserRouter에 대해 살펴보자.

 

 

 

 

<BrowserRouter>

• HTML5를 지원하는 브라우저의 주소 감지
• Router의 역할
• 새로고침을 하지 않아도 새로운 컴포넌트를 렌더링해주는 기능 담당
• URL마다 컴포넌트가 바뀔 때, 바뀌는 부분의 최상단에 위치해야 함(위의 사진 참고)

 

 

 

 

• 맨 아래의 path="*" 부분은 설정한 url 외의 url 진입이 발생하는 경우를 처리하기 위한 경로이다.
  • page not found 에 사용됨

 

 

 

 

 

<Link>

• 경로를 변경함
• HTML의 a태그의 기본적인 속성은, 페이지 이동을 통해 페이지를 아예 새로 불러오는 것
• 리액트에서 페이지 이동을 통해 페이지를 아예 새로 불러온다면, 상태들도 초기화되고 렌더링된 컴포넌트들도 모두 사라지고 새로 렌더링을 하게 됨 → 리액트 장점이 사라짐 → 따라서, Link를 사용
• a태그 대신 사용할 수 있는 컴포넌트 → 따라서, 부드러운 화면 전환 가능
  • a태그도 사용 가능하지만, 페이지 전환시 새로 고침이 되어 깜빡거리는 현상이 존재함
• 브라우저의 주소만 바꿀뿐, 페이지를 새로 불러오지는 X
• a태그의 href 대신 Link 컴포넌트의 to 속성을 이용해서 라우팅
  • 주의) to 속성 값에 /부터 시작하지 않으면, 해당 컴포넌트가 라우팅된 주소의 뒤에 문자열로 추가 됨(아래 사진)

 

 

 

 

Link를 사용하지 않고 페이지를 이동하는 방법은?

 

 

 

 

 

라우팅을 위한 prameter & query 활용에 대해 간단히 살펴보자.

 

 

URL 파라미터

• 경로에 :를 사용해 설정되는 것
  • ex) /product/:id
• 파라미터가 여러 개인 경우, 그냥 쭉 이어서 설정하면 됨
  
  • ex) /product/:id/:name

 

 

 

쿼리

• useSearchParams()를 사용하여 URL의 쿼리를 활용할 수 있음

 

 

 

 

---

참고

https://velog.io/@bigbrothershin/React-Router