위코드 파운데이션 과정을 들으며 정리한 내용입니다.
Routing
웹프론트엔드에서 Routing 은 다른 경로(url)에 따라 다른 화면을 보여주는 것을 의미합니다. 기존 웹페이지에서는 html 에 a 태그 링크를 걸고, 화면에서 해당 링크를 클릭했을 때 다른 페이지로 이동하게 했습니다. 리액트는 SPA 이기 때문에 기존과 다른 방식으로 라우팅 해야 하고, 리액트 라이브러리에는 라우팅 기능이 없어서 별도 라이브러리를 받아야 합니다.
SPA
SPA 는 Single Page Application 로 페이지가 하나인 웹 애플리케이션입니다. SAP 는 하나의 html 파일로 모든 페이지를 보여주므로, html 안에서 경로에 따라 다른 UI 를 보여주도록 라우팅해야 합니다.
React-Router
react-router-dom 설치
리액트에서 라우팅을 할 때 가장 많이 사용하는 라이브러리는 react-router-dom 입니다. 아래와 같은 터미널 명령어로 설치할 수 있습니다.
npm install react-router-dom설치가 완료되면 pakage.json 파일의 dependencies 에서 확인할 수 있습니다.
Router 컴포넌트
라우크 컴포넌트를 담을 Router.js 파일을 src 폴더 안 index.js 와 같은 위치에 생성합니다. 우선 기본 컴포넌트들을 import 합니다.
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Main from './pages/Main/Main'; // path 속성에 따라 UI를 담은 컴포넌트를 import 그 아래는 아래와 같은 코드를 작성합합니다.
const Router = () => {
return (
<BrowserRouter>
<Routes>
<Route path='/main' element={<Main />} />
</Routes>
</BrowserRouter>
);
};
export default Router;BrowserRouter - 주소 변경에 대한 편의 기능 제공, 페이지 새로고침 되지 않아도, 주소 변경 가능하게 하는 기능
Routes - 컴포넌트는 여러 Route 를 감싸서 규칙을 일치하는 하나만 렌더링
Route - 컴포넌트 규칙 설정. 속성값 path 는 경로 설정, element 는 해당 경로에서 보여줄 컴포넌트. path 경로를 / 로 하면 localhost:3000 에 출력 /main 하면 localhost:3000/main 에 화면 출력
상단 네비나 하단 푸터처럼 경로에 상관없이 모든 화면에 고정적으로 표시되어야 하는 컴포넌트가 있다면, Routes 바깥에 넣어 줍니다.
const Router = () => {
return (
<BrowserRouter>
<Nav /> // 여기 위치
<Routes>
<Route path='/main' element={<Main />} />
</Routes>
<Footer /> // 여기 위치
</BrowserRouter>
);
};웹페이지 처럼 특정 동작을 통해 라우팅(다른 페이지로 이동)을 구현하려면 react-router-dom 에서 제공하는 Link 컴포넌트를 사용할 수 있습니다. to 라는 속성에 아래처럼 경로를 적어주면 됩니다.
import React from 'react';
import { Link } from 'react-router-dom';
const Login = () => {
return <Link to="/signup">회원가입</Link>;
};
export default Login;구현된 화면을 개발자 도구로 확인해보면, Link 컴포넌트가 a 태그로 변환된 것을 확인할 수 있습니다. (실제 a 태그처럼 동작하는 것은 아님) 실제 a 태그를 사용하면 매번 전체 화면을 렌더링해서 비효율적입니다. Link 컴포넌트는 화면에서 바뀌어야 하는 부분만 새로 렌더링 합니다. a 태그는 외부 사이트로 이동할 때 사용합니다.
react-router-dom 에는 라우팅을 구현하는 hook 도 있습니다. hook 은 Link 와 다르게 함수 기능을 사용할 수 있습니다.
import React from 'react';
import { useNavigate } from 'react-router-dom';
const Login = () => {
const navigate = useNavigate();
const goToMain = () => {
navigate('/main');
};
return (
<button className="loginBtn" onClick={goToMain}>
로그인
</button>
);
};
export default Login;Hook 은 최상위에서만 호출이 가능하므로, 상단에서 useNavigate() 를 변수로 담아 아래에 넣어줍니다. 위 goToMain 함수에 아래처럼 조건문을 작성하면 조건에 따른 페이지 전환이 가능합니다.
import React from 'react';
import { useNavigate } from 'react-router-dom';
const Login = () => {
const navigate = useNavigate();
const goToMain = () => {
if (response.message === "valid user") {
navigate("/main");
} else {
alert("가입된 회원이 아닙니다")
navigate("/signup")
}
};
return (
<button className="loginBtn" onClick={goToMain}>
로그인
</button>
);
};
export default Login;
Link 컴포넌트
네비게이션 메뉴나, 어사이드 메뉴 등 바로 페이지를 이동하는 경우 사용
useNavigate hook
로그인 버튼 클릭시 백엔드 API 로 데이터 전송 후 페이지 이동하거나 userData 의 인증 혹은 인가가 필요한 경우, 혹은 로그인 작업 이후 응답 메시지에 따른 분기 처리를 해야 할 때 사용
