라우팅(Routing), 라우트(Route) 란?
그대가 컴퓨터 쪽 공부를 시작한다면, 라우팅, 라우트이란 용어를 많이 마주쳤을 수 있다.
CS 지식 입장에서 라우팅은, 네트워크 계층 중 하나로 패킷의 전송 경로를 지정하는 역할을 하는 것을 말한다.
이렇게 설명하면 이제 패킷은 뭐지.. 네트워크 계층이 먼말이요.. 어렵구만
정말 쉽게 생각하면, 라우터는
큰 마트에 있는 안내 요원 같은 역할을 한다고 보면 된다.
패킷1: 고기 코너 어디있어요?
라우터: 쭉 가시다 오른쪽에 있습니다~
패킷2: 생선 코너가 어딨뇨..?
라우터: 아 고기코너에 왼쪽에 있습니다~
패킷3: 우유 사야 되는데..어디로 가야하오?
라우터: 바로 뒤쪽으로 쭉 가면 됩니다~
어떠한 패킷이 들어왔을 때 이의 요청을 파악하고 원하는 목적지 경로를 지정하는 것을 라우팅이라고 한다.
마트 요원이 길을 알려주는 행위가 라우팅(Routing)이라 하고 그 마트요원을 라우터(Router)라고 한다 (그리고 그 경로를 라우트(Route) 라고 한다).
어느정도 감이 잡히는가?
우리가 어떤 웹사이트에 접속할 때 그 내부에서 돌아다니는 행위들
- 마이페이지에 들어가거나
- 로그인 창에 들어가거나
- 메인화면으로 돌아오거나
우리는 각 요청에 따라 다른 화면을 마주치게 된다.
클라이언트들의 요청들에 따라 웹사이트는 다른 응답을 만들어 두어야 하고 다른 소스를 준비해두어 클라이언트들이 올바른 목적지에 도달할 수 있도록 해야했다. 이런 네비게이션(Navigation) 기능을 가능케 하는 것이 라우트, 라우팅, 라우터 이다.
예전에 라우팅은 백엔드 서버의 역할이었다.
클라이언트의 요청 URL Path에 따라 웹 페이지 소스 경로를 지정하는 역할을 서버에서 했었다.
하지만, SPA(Single Page Application)가 대세를 탐과 같이 리액트, 뷰와 같은 강력한 프론트엔드 툴이 등장하기 시작했고, Navigation 역할이 프론트에서 가능하게 되었다.
React 에서 Route (Navigation) 구현
react-router-dom 사용
react-router-dom 은 리액트 개발자들이 가장 많이 사용하는 라우팅 라이브러리이다.
간단한 사용법을 훑고 자세한 코드 동작에 대해선 다음 블로그 글에서 다루도록 하겠다.
1. 리액트 프로젝트 디렉토리에서 react-router-dom 다운로드
터미널에
npm install react-router-dom입력 enter
2. 앱에 모든 컴포넌트를 <BrowserRouter> 로 감싸주기
react-router-dom 에 컴포넌트 중 하나인 <BrowserRouter> 는 전체 어플리케이션을 통제하는 라우터 역할을 합니다. <BrowserRouter>하위 컴포넌트를 index.js의 <App> 상단에 감싸주어도 되고, App.js 속 전체 컴포넌트 최상단에 감싸주어도 된다.
<BrowserRouter/>는 외부 라이브러리의 컴포넌트 임으로import { BrowserRouter } from 'react-router-dom'를 꼭 해주어야 컴포넌트 사용이 가능하다.
이
<BrowserRouter />로 전체 컴포넌트들을 감싸주지 않으면, 경로와 링크에 해당하는<Route>,<Link>컴포넌트 등이 동작하지 않는다.
방법 1)
방법 2)
3. <Routes> 와 <Route> 컴포넌트로 경로 지정
<Routes> 컴포넌트와 <Route> 컴포넌트는 url 경로와 경로에 따른 출력 요소를 결정하는 역할을 한다.
작성하는 규칙
import {Routes, Route} from 'react-router-dom으로 컴포넌트 임포트<Routes>는<Route>의 부모 요소로 각 설정한<Route>요소들을 감싸주어야한다.<Route path="<url 경로>" element={"<페이지 컴포넌트>"}>의 형식으로 작성한다.- path 옵션에
path="*"을 설정할 시 지정되지 않은 다른 path로 접속시 해당 페이지를 보여준다.
성공적으로 라우팅이 되었다면, 리액트를 로컬에서 실행했을때
- localhost:3000/ => Tweets 페이지
- locahost:3000/about => About 페이지
- localhost:3000/mypage => MyPage 페이지
로 라우팅을 구현할 수 있게된다.
4. <Link> 컴포넌트를 이용한 path 이동 구현
이제 각각 어떠한 path 별로 어떤 컴포넌트를 보여주면 되는지 구현했으니, 유저가 직접 url 을 수정하는 방법 보다 쉽게 path를 이동할 수 있도록 해야한다.
쉽게 말해, 웹사이트에 상단 메뉴바(네비게이션 버튼)을 구현해야 한다는 것이다.
<Link> 컴포넌트는 DOM 엘리멘트 중 <a> 태그와 매우 유사한 역할을 한다.
<Link to="<경로>"> 형식으로 작성하며 이 <Link> 로 감싸진 하위 엘리먼트를 클릭했을 시 해당 경로로 이동하는 이벤트를 갖고 있다.
import {Link} from 'react-router-dom'으로 컴포넌트 임포트<i>아이콘,<button>버튼 요소 등을<Link>컴포넌트로 감싼다.- 해당 요소를 클릭시 이동할 path를 link 컴포넌트의 to 속성으로 지정한다.
Navigation 구현 모습
