-
React-Routerbootcamp(with wecode)/개념정리 2023. 3. 3. 23:41
1. react-router-dom 설치
react-router-dom은 react에서 라우팅을 위해 가장 많이 사용되는 라이브러리
npm install react-router-dom
2. Router 컴포넌트 구현하기
아래의 코드를 살펴보자
CRA를 통해 프로젝트를 만들고 npm start를 터미널에 입력하면, 최초 화면에서 App 컴포넌트의 내용을 볼 수 있다.
하지만 지금은 아무리 url을 변경해도 화면의 변화가 일어나지 않는다.
// 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 />);
Router 컴포넌트를 만들어주는 이유는
화면의 변화와 관련 기능을 구현하고 관리하기 위해서 Router 컴포넌트를 만들어줘야 한다
아래의 코드를 통해 Router 컴포넌트를 구현해보자
// 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;
3. Router 이동하기
3-1. Link 컴포넌트 사용하기
react-router-dom에서 제공하는 컴포넌트 중 Link 컴포넌트를 이용해 Routing 기능을 구현할 수 있다
Router에서 여러 컴포넌트를 import해서 사용했던 것과 마찬가지로,
react-router-dom으로부터 Link 컴포넌트를 import해서 JSX 내부의 원하는 곳에 사용할 수 있다
Link 컴포넌트를 사용해보자
// Login.js import React from 'react'; import { Link } from 'react-router-dom'; const Login = () => { return <Link to="/signup">회원가입</Link>; }; export default Login;
3-2. useNavigate hook 컴포넌트 사용하기
React-router-dom에는 Link 컴포넌트 외에도 라우팅을 구현할 수 있게 해주는 hook이 있다.
react-router-dom에서 제공하는 useNavigate hook을 사용해보자
// Login.js 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;
3-3. Link,useNavigate hook 비교
1) Link 컴포넌트
- 클릭 시 바로 페이지를 이동하기 때문에, 조건 없이 페이지를 이동할 때 적합
- Nav Bar의 메뉴 혹은 Aside Menu 등 바로 페이지를 이동하는 경우 사용
2) useNavigate hook
- 조건에 따라 페이지를 전환해야 할 때 사용하기 적합
- 로그인 버튼 클릭 시에 백엔드 API로 데이터를 전송하는 작업을 한 뒤 페이지를 이동하거나 userData의 인증 혹은 인가가 필요한 경우, 혹은 로그인 작업 이후 응답 메시지에 따른 분기 처리를 해야 하는 상황일 때, useNavigate를 사용
'bootcamp(with wecode) > 개념정리' 카테고리의 다른 글
Routing, SPA (0) 2023.03.03 Hook (0) 2023.02.23 Props (0) 2023.02.23 westagram wrap up (0) 2023.02.19 Github 정리 2 (0) 2023.02.16