[포스코 코딩온 KDT 8기] 웹 풀스택 과정 73일(23.09.26)차 회고 | React-Router

---

2차 프로젝트를 시작하면서(물론 그전부터) 블로깅을 거의 안하게된거 같다ㅠㅠ 이제 포트폴리오도 준비하고 기술면접, 코딩테스트, 자소서 등 준비할게 많기 때문에 차근차근 최근것부터 예전 것을 정리해보며, 준비하고자 한다. 프론트엔드 개발자로써 제일 중요하다고 할 수 있는 리액트를 하나하나 파헤쳐보자

 

---

SPA

리액트 라우터를 먼저 알기 전에 리액트에서 라우터를 이용함으로써 개발하려고 하는 SPA에 대해 알고가야한다.

SPA란 Single Page Application의 약어로 단일 웹페이지로 돌아하는 어플리케이션을 말한다. 브라우저에서 자바스크립트를 이용해 단일 췝페이지 상의 HTML 요소를 동적으로 생성 및 조작할 수 있다.

다만 검색 엔진 최적화에는 적합하지 않은 방법이다. 이는 React, Svelte, Vue.js와 같은 라이브러리로 개발할 수 있다.

 

라우팅

그럼 라우팅이란 무엇일까? 라우팅이란 간단하 말하자면 경로를 지정하는 행위를 말한다. 사용자가 요청한 url에 맞는 페이지를 보여주는 것이고, 리액트에서 제일 많이 사용되는 것이 React Router이다.

 

React Router

결론적으로 리액트 라우터란 개발자가 주소별로 다른 컴포넌트를 보여주기 위해 사용하는 라이브러리라고 할 수 있다.  설치 명령어는 다음과 같다

npm i react-router-dom@6 #버전 6 지정 설치

주요 컴포넌트는  

- BrouserRouter

- Routes

- Route

- Link

- createBrowserRouter

위와 같이 있다. 하나씩 알아보자

 

-  BrouserRouter

▷ HTML5를 지원하는 브라우저의 주소를 감지한다.

▷  Router의 역할

▷ 새로고침 없이 새로운 컴포넌트를 랜더링 해준다.

▷ url마다 컴포넌트가 바뀔 떄, 바뀌는 부분의 최상단에 위치해야한다.

import {BrowserRouter} from 'react-router-dom';

설치한 리액트 라우터 돔에서 가져와서 사용하면 된다.

 

- Routes, Route

▷ 경로가 일치하는 컴포넌트를 렌더링해주도록 경로를 매칭하는 역할을 해준다.

아래와 같이 경로를 매칭한다.

<Routes>
	<Route path="/" element={<RouteMain />}><Route>
    <Route path="/product/:id" element={<RouteProduct />}><Route>
    <Route path="*" element={<RouteNotFound />}><Route>
</Routes>

path는 경로이고 element는 연결할 컴포넌트이다.

하지만 위처럼 사용하는 방식은 옛날에 사용한 방식이며, 최근에는 createBrowserRouter를 사용한다.

 

- createBrowserRouter

import {createBrowserRouter} from 'react-router-dom';

를 불러와 배열 안의 객체를 중첩으로 넣어서 사용한다.

- Link

경로를 변경한다. 기존에 사용하던 a태그는 새로고침으로 렌더링을 수행했지만 <Link> 컴포넌트는 페이지 전환을 방지한다.

 

- Outlet

중첩 라우트 렌더링: Outlet은 중첩 라우트의 부모 라우트 컴포넌트 내에 서 사용되어, 해당 부모 라우트의 URL과 일치하는 자식 라우트 컴포넌트 를 렌더링해준다

context를 이용하여 자식 라우트에 데이터 전송이 가능하며 자식 라우트에서는 useOutletContext()를 사용한다.

---

URL 파라미터

- useParams()

경로에 : 를 사용해 설정되는 것을 가져올 수 있다.

URL 쿼리스트링

- useSearchParams()

원하는 쿼리스트링을 보낼 수 있다.

  - useNavigate()