1. 들어가기 전에
리엑트 라우터를 알기 전에 우리는 리액트의 특성을 이해할필요가 있다. 리액트는 가상 DOM을 사용하므로 빠른 렌더링 속도와 효율적인 메모리 관리를 실현할 수 있는데 이 장점을 사용하기 위해서 SPA(Single Page Application)으로 개발한다.
1.1 SPA(Single Page Application)란?📄
단일 웹페이지로 돌아가는 애플리케이션을 말하며 브라우저에서 자바스크립트를 이용해 단일 웹페이지 상의 HTML 요소를 동적으로 생성 및 조작하므로 UX가 빠르고 부드럽다. But! 초기 로딩 속도가 느리고 검색 엔진 최적화(SEO)에 적합하지는 않다.
1.2 MPA(Muti Page Application)란?📑
MPA는 각 페이지에 해당하는 HTML 파일이 따로 있고 사용자가 다른 페이지로 이동할 때 서버로부터 새로운 HTML을 가져와 렌더링하는 방식으로 동작한다.
장점으로는 간단하게 구현할 수 있으며 검색엔진 최적화(SEO)에 유리하다는 것이고 단점으로는 페이지 전환시 느리고 화면이 깜빡여 사용자 경험에 악영향을 미친다는 것이다.
2.React Router🛣️
라우트는 경로(URL), 라우팅은 경로(URL)를 찾아가 보여주는 과정이다.
리액트 라우터는 주소별로 다른 컴포넌트를 보여주기 위해 경로를 지정하는 라이브러리이다.
2. 헤더랑 상품페이지 만들기
2.1 라우팅 시작하기
먼저 react-router-dom 패키지를 설치해야한다
npm install react-router-dom라우터를 사용한 예제의 App.js 코드이다
여기서는 3가지의 컴포넌트를 import 해줬다
import { BrowserRouter, Routes, Route } from 'react-router-dom';2.2 BrowserRouter
웹 애플리케이션 내에서 브라우저의 주소 표시줄과 뷰를 동기화하는 역할을 한다.
BrowserRouter는 React Router 라이브러리의 핵심 컴포넌트 중 하나로, 일반적으로 애플리케이션의 최상위 컴포넌트로 사용되며, 라우팅을 설정하고 관리하는 컨테이너 역할을 한다. BrowserRouter는 HTML5 History API를 기반으로 브라우저의 주소 표시줄을 업데이트하고 페이지를 다시 로드하지 않고도 다양한 경로에 대한 뷰를 표시할 수 있게 해준다.
2.3 Routes
Routes 컴포넌트는 라우팅을 정의하는 데 사용된다.
일반적으로 BrowserRouter 내에 위치하며, 다른 Route 컴포넌트를 자식으로 가집니다. Routes 컴포넌트는 URL 경로와 연결된 컴포넌트를 라우팅하기 위한 매핑을 정의하며, 경로와 일치하는 첫 번째 Route가 활성화됩니다.
2.4 Route
Route 컴포넌트는 특정 URL 경로에 연결된 React 컴포넌트를 렌더링하는 역할을 한다.
Routes 컴포넌트 내에서 사용되며, 경로와 일치하는 경우 해당 컴포넌트가 화면에 표시된다. Route는 다양한 속성을 통해 경로와 연결된 컴포넌트를 지정할 수 있으며, 예를 들어 path prop(속성)으로 경로를 지정하고 element prop(속성) 으로 렌더링할 컴포넌트를 지정한다.
파일 구조는 이렇게 되어있는데 path 속성에 경로를 지정해주고 element 속성으로 렌더링할 페이지를 지정해줬다
2.5 Link
Link 컴포넌트는 라우팅된 애플리케이션 내에서 내부 링크를 만드는 데 사용된다.
일반적으로 애플리케이션 내에서 다른 경로로 이동할 때 사용하며, 일반적인 HTML <a> 태그와 유사하지만 차이점은 내부 라우팅 시에 페이지를 다시 로드하지 않고 클라이언트 측에서 라우팅을 수행한다는 것이다. to prop(속성)을 사용하여 이동하려는 경로를 지정한다.
React Router 라이브러리를 사용하면 단일 페이지 애플리케이션(SPA) 내에서 클라이언트 측 라우팅을 쉽게 설정하고 관리할 수 있다
Header.js에서 Link 컴포넌트의 to속성을 사용하여 경로를 이동하게 설정하였다!
/products와 연결되어 있는 ProductPage.js
ProductList를 가져오도록 했는데 바로 ProductList를 연결하지 않은 것은 ProductPage에 컴포넌트를 추가하기 용이하도록 하기 위함이다.
ProductList.js
4번째 줄부터 간소화 해 놓은 것은 더미데이터로 배열에 딕셔너리를 넣기위해 만든 코드이다.
더미데이터 예
[{id:1, name:"ethan", email:"afdsf@naver.com", body:"qwertqwerty"}, {...}, ...]productInfos를 map으로 불러와서 새로운 배열 컴포넌트를 생성한다
ProductItem.js
product 를 prop으로 가져와서 딕셔너리 안에 name 과 body키의 값을 불러와 각각 상품명, 상세설명으로 표시해준다.
tip
${}로 싸여있는곳은 키값을 string으로 보내주는 것 과 같다.
link to로 현재 경로인 /products 에서 id키의 값에 해당하는 링크로 보내준다. ex)(/products/1, /products/3, ...)
결과
3. 상세페이지 접근하기
ProductDetailPage.js
먼저 useNavigate(), usePrams()라는 훅에 대해서 먼저 설명하자면
3.1 useParams()
/product/:id
경로에: 를사용해설정되는것이고
URL 파라미터가여러개인경우/product/:id/:name 처럼 설정되는데
간단히 말하자면 url에서 : 뒤에 있는 값을 가져온다고 생각하면 될 것 같다.
import {useParams} from 'react-router-dom';
const {파라미터명} = useParams();3.2 useNavigate()
- Link 컴포넌트를 사용하지 않고 다른 페이지로 이동해야 하는 경우, 뒤로가기 등에 사용한다.
const navigate = useNavigate();
<li><button onClick={() => navigate(-1)> go back </button></li>
<li><button onClick={() => navigate(1)> go forword </button></li>
<li><button onClick={() => navigate(-2)> go pages back </button></li>
<li><button onClick={() => navigate('/')> go root </button></li>결과
다음에는 다크모드 적용방법이랑 jsonPlaceholder에서 데이터를 받아와 표시하는방법을 포스팅 하겠습니다 :)
