Routing..?
사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는것이다.
비록 이전에 우리는 html에서 a태그를 통해 링크를 걸어 페이지를 이동했었지만 React는 SPA, 페이지가 하나인 애플리케이션을 만들어주기 때문에 경로에 따라 다른 UI를 보여주는 라우팅 기능이 필요하게 되었다.
React는 라우팅 기능이 내장되어있지 않아 별도의 Library를 설치해야하는데 가장 많이 사용되는 라이브러리는 react-router-dom이다.
설치방법은 터미널에 아래의 명령어를 입력해주면 된다.
npm install react-router-domRouter.js
라우팅 기능을 구현하고 관리하기 위해서는 Router 컴포넌트를 만들어주어야 한다.
Router.js파일은 js파일들을 연결해서 HTML에 그려주는 index.js파일과 나머지 component들이 있는 src폴더 안에 생성한다.
// Router.js
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
const Router = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Login />}/>
<Route path="/main" element={<Main />}/>
</Routes>
</BrowserRouter>
)
}BrowserRouter 컴포넌트 주소 변경에 다양한 편의 기능을 제공해 주는 컴포넌트, 대표적으로 페이지가 새로고침되지 않아도 주소 변경이 가능하게 하는 기능이 있다.
Routes 여러 Route를 감싸서 그 중 규칙이 일치하는 단 하나의 라우트를 렌더링 시켜주는 역할을 한다.
Route path: url경로 지정, element: 화면에 그려줄 컴포넌트를 지정.
💡만약 경로에 상관없이 모든 화면에서 표시되어야 하는 컴포넌트가 있다면...???
➡️ Routes 컴포넌트는 여러 Route를 감싸서 그 중 규칙이 일치하는 라우트 하나만을 랜더링 시켜준다. 그렇기 때문에 경로에 상관없이 표시되고 싶은 컴포넌트는(ex. navBar, footer) 아래와 같이 Routes 밖으로 빼주면 된다.
// Router.js
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Nav from './components/Nav/Nav';
import Footer from './components/Footer/Footer';
import Login from './pages/Login/Login';
import Signup from './pages/Signup/Signup';
import Main from './pages/Main/Main';
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>
);
};
export default Router;index.js
Router 컴포넌트를 화면에 그려주기 위해서는 Router를 render함수에 넣어주어야 한다.
// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import Router from './Router';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Router />);Route 이동
보통 웹페이지에서 이동을 하려면 url값을 수정하지 않고 특정 동작을 통해 페이지 이동을 한다. 특정 동작을 통해 라우팅을 구현하기 위해서는 두가지 방법이 있다.
1. Link 컴포넌트 사용
Link 컴포넌트의 to 속성을 사용해 원하는 경로로 이동할 수 있으며 특별한 조건이 없을 때 사용하기 좋다.
개발자 도구를 통해 Link 컴포넌트를 확인해보면 a태그로 변환되는 것을 확인할 수 있는데
a 태그를 직접 사용할 경우 페이지 이동시 서버로부터 매번 새로운 페이지를 요청해서 받아오게 되기 때문에 비효율적이다. 반면 Link컴포넌트를 통해 변환된 a태그는 실제 서버에 요청을 보내지 않고, url만 변경되기때문에 실제 화면에서 바뀌어야 하는 부분만 새로 렌더링 된다.
a 태그의 사용은 외부 사이트로 이동할 때 전체 페이지를 받아와야해서 사용하며 Link 컴포넌트는 내부에서 페이지 전환을 해야할 때 사용한다.
// Login.js
import React from 'react';
import { Link } from 'react-router-dom';
const Login = () => {
return <Link to="/signup">회원가입</Link>;
};
export default Login;2. useNavigate hook 사용
이벤트 발생시 useNavigate함수가 실행되기 위해서는 함수를 변수에 먼저 담아준 뒤 on이벤트를 실행하도록 설정하여야 한다. useNavigate함수는 조건문에서 사용하기 좋다.
// 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;