1. Routing
- 라우팅(Routing)과 관련된 용어를 먼저 정리하자면 Route는 ‘경로’라는 의미를 담고 있고, Routing은 ‘경로를 찾는 행위’, Router는 Routing을 해주는 ‘도구’라고 할 수 있습니다. 웹 프론트엔드에서 Routing은 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것을 의미합니다.
- React(리액트)는 Framework가 아닌 Library이기 때문에 라우팅 기능이 내장되어있지 않습니다. 그래서 별도의 Library를 설치해서 라우팅을 구현해야 하고, CRA를 통해서 만들 웹 애플리케이션은 SPA이기 때문에 기존의 라우팅 방식과는 다르게 라우팅을 구현해야 합니다.
2. SPA
-
SPA (Single Page Application) 는 페이지가 하나인 웹 애플리케이션입니다. 여기서 ‘페이지’란 html 파일을 뜻하기 때문에, SPA는 html이 하나인 웹 애플리케이션을 의미합니다. 상반되는 개념으로는 html 파일이 여러 개인 MPA (Multi Page Application)가 있습니다.
-
MPA는 html 파일이 여러 개라서 다른 페이지를 보여 주고 싶을 때, 해당 html 파일을 연결해 보여주는 형태로 페이지를 이동하는 기능을 구현할 수 있었습니다. 하지만 SPA는 html 파일이 하나이기 때문에 하나의 html에서 경로(url)에 따라서 다른 UI를 보여주는 라우팅 기능이 필요하게 된 것입니다.
Router 컴포넌트
Router 컴포넌트를 만드는 이유
// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
CRA를 통해 프로젝트를 만들고 npm start를 터미널에 입력하면, 최초 화면에서 App 컴포넌트의 내용을 볼 수 있게 됩니다. 하지만 지금은 아무리 url을 변경해도 똑같은 화면만 보이게 됩니다. 그래서 라우팅 기능을 구현하고 관리하기 위해서 Router 컴포넌트를 만들어줘야 합니다.
Router.js 파일 위치
- Router.js 파일은 src 폴더 안 index.js와 같은 위치에 생성
Router 컴포넌트 구현하기
// Router.js
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';라우팅을 구현하기 위해 설치했던 react-router-dom 패키지에는 여러 컴포넌트가 포함되어 있고, 이 중에서 Router 컴포넌트를 구현하기 위해서는 BrowserRouter, Routes, Route 컴포넌트를 import 해야 합니다.
// Router.js
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
const Router = () => {
return (
<BrowserRouter> // 1
<Routes> // 2
<Route path="/" element={<Components />} /> // 3
</Routes>
</BrowserRouter>
);
};
export default Router;- BrowserRouter 컴포넌트로 전체를 감싸줍니다.
- BrowserRouter 컴포넌트의 자식 요소로 Routes 컴포넌트를 넣어줍니다.
- Routes 컴포넌트의 자식 요소로 Route 컴포넌트를 넣어줍니다.
BrowserRouter 컴포넌트는 주소 변경에 대해 다양한 편의 기능을 제공해 주는 컴포넌트입니다. 대표적인 기능으로는 페이지가 새로고침 되지 않아도 주소 변경이 가능하게 하는 기능이 있습니다.
Routes 컴포넌트는 여러 Route를 감싸서 그중 규칙이 일치하는 라우트 단 하나만을 렌더링 시켜주는 역할을 합니다.
Route 컴포넌트는 규칙을 설정할 수 있는 컴포넌트입니다. Route 컴포넌트에서 어떻게 규칙을 설정하는지 조금 더 자세하게 살펴보도록 하겠습니다. Route 컴포넌트의 형식을 보면 html에서 사용한 태그의 형식과 유사하다는 것을 볼 수 있습니다. 예를 들어 input 태그에서 type 속성을 사용했던 것처럼 Route 컴포넌트에서는 path 와 element 속성을 사용하고 있는 것을 볼 수 있습니다. Route 컴포넌트에서 path는 경로를 설정하는 속성이고, element는 path 속성에서 설정한 경로로 이동했을 때, 어떤 컴포넌트를 보여줄지 결정하는 속성입니다.
const Router = () => {
return (
<BrowserRouter>
<Routes>
<Route path='/' element={<Login />} /> ⌉
<Route path='/signup' element={<Signup />} > ⎮ // 2
<Route path='/main' element={<Main />} /> ⌋
</Routes>
</BrowserRouter>
);
};Router 컴포넌트 활용
const Router = () => {
return (
<BrowserRouter>
<Nav /> // nav 컴포넌트
<Routes>
<Route path="/" element={<Login />} />
<Route path="/signup" element={<Signup />} />
<Route path="/main" element={<Main />} />
</Routes>
<Footer /> // footer 컴포넌트
</BrowserRouter>
);
};경로에 상관없이 모든 화면에서 표시되어야 하는 컴포넌트
- Routes 컴포넌트는 여러 Route를 감싸서 그중 규칙이 일치하는 라우트 단 하나만을 렌더링 시켜준다고 했습니다. 그렇다면 경로에 상관없이 보여주고 싶은 컴포넌트가 있다면 위와 같이 이 규칙에 포함되지 않도록 Routes 컴포넌트 밖에 위치시켜주면 됩니다. 이렇게 구현하게 되면 결과적으로 Nav와 Footer 컴포넌트는 특정 경로에 따라 보여지는 것이 아니라 어떤 경로가 오더라도 항상 화면에 보여지게 됩니다.
Link 컴포넌트 사용하기
// Login.js
import React from 'react';
import { Link } from 'react-router-dom';
const Login = () => {
return <Link to="/signup">회원가입</Link>;
};
export default Login;
useNavigate hook 사용하기
// Login.js
import React from 'react';
import { useNavigate } from 'react-router-dom'; // 1
const Login = () => {
const navigate = useNavigate(); // 2
const goToMain = () => { // 3
navigate('/main');
};
return (
<button className="loginBtn" onClick={goToMain}> // 4
로그인
</button>
);
};
export default Login;
정리
- Link 컴포넌트
- 클릭 시 바로 페이지를 이동하기 때문에 조건없이 페이지를 이동할 때 적합합니다
- Nav Bar의 메뉴 혹은 Aside Menu등 바로 페이지를 이동하는 경우에 사용하는 것이 좋다
- useNavigate hook
- 조건에 따라 페이지를 전환해야 할 때 사용하기 적합합니다.
-로그인 버튼 클릭 시에 백엔드 API로 데이터를 전송하는 작업을 한 뒤 페이지를 이동하거나 userData의 인증 혹은 인가가 필요한 경우, 혹은 로그인 작업 이후 응답 메시지에 따른 분기 처리를 해야 하는 상황일 때, useNavigate를 사용하는 것이 좋습니다.
- 조건에 따라 페이지를 전환해야 할 때 사용하기 적합합니다.
