0️⃣ 들어가며
웹 애플리케이션을 개발할 때 사용자 경험을 향상시키기 위해 페이지 간의 전환을 관리하는 것은 매우 중요해요.
🐸 : 특히나 시리즈의 앞에서 말했듯
동적 웹페이지(SPA)방식으로 자동하는 리액트는 초기에 html 파일을 한번만 불러온뒤 화면을다시 그리기때문에 라우팅을 다루는것은 중요해요
이를 위해 리액트 라우팅과 네비게이션에 대해 자세히 살펴보겠습니다.
1️⃣ 리액트 라우팅이란 무엇인가요?
리액트 라우팅은 리액트 애플리케이션에서 여러 페이지 간에 전환하는 기능을 제공합니다.
다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것
이를 통해 사용자가 애플리케이션을 탐색할 때 URL이 변경되고 해당 URL에 맞는 컴포넌트가 렌더링됩니다.
🐸 : 일반적으로 정통적인
html로 구성되어있는정적웹페이지에서 로그인 버튼을 누르면 화면이 한번 깜박이면서 상단 주소표시줄의 주소가 바뀌고 잠시 로딩이 돌다가 로그인 페이지가 나오는걸 본적이 있을거에요
이 현상은 화면이 잠시 깜박거리는 동안 브라우저가 클라이언트 서버에 변경된 상단 주소표시줄의 주소에 해당하는html파일을 다시 받아오는 건데요
하지만 본 리액트 시리즈의 앞에서 말했듯 리액트는 SPA로 이루어져
하나의 html파일을 가져와 컴포넌트를 렌더링하고 상태(state)의 변경 감지를 통해 화면(컴포넌트)를 다시그리는 리렌더링을 통해 UI의 변경을 반영한다고 했어요,
그렇다면 결국 로그인 버튼을 눌러 로그인 화면으로 이동할 때 정적 웹페이지 처럼 로그인 페이지에 해당하는html화면(문서)를 다시 받아오는 것이아니라 다시 그리는 거겠죠?
그래서 아예 주제가 다른 페이지를 보려고 할 때 예를 들어정적 웹페이지에서다른 문서(다른 페이지)에 해당하는컴포넌트의 묶음을url과 매칭시켜 정해놓고
주소표시줄이 변경되는 어떤 이벤트가 일어날때 매칭시켜놓은 정해진 주소에대한 페이지의 컴포넌트를 렌더링해 다시 그리는 것이죠.!!
✅ 리액트 라우터 설치하기
위에서 말했듯 그럼 이제 리액트에서 현재 URL을 확인하고 URL 변경을 기반으로 라우팅을 수행하고 화면에 다른 컴포넌트를 가져와야하는데
React 자체에는 이런 기능이 내장되어 있지 않아요.
🐸 : 기능이 다갖춰져 있지 않고 사용자가 필요한 라이브러리를 조합해서 써야하는 이런점!! 이것이 React가 Framework 가 아닌 Library 로 분류되는 이유에요
그래서 React의 라우팅 기능을 위해 가장 많이 쓰이는 react-router-dom 라이브러리를 함께 사용해요
먼저, 리액트 애플리케이션에 리액트 라우터를 설치해야 합니다. 다음 명령을 사용하여 리액트 라우터를 설치합니다.
npm install react-router-dom또는
yarn add react-router-dom기본적인 네비게이션 구현하기
이제 간단한 네비게이션을 구현해보겠습니다. 아래 예제에서는 홈 페이지와 "About" 페이지를 가지는 간단한 애플리케이션을 만들어 보겠습니다.
- 파일구조 🗂️
📦src
┣ 📂pages
┃ ┣ 📜About.jsx
┃ ┗ 📜Home.jsx
┣ 📜App.css
┣ 📜App.jsx
┣ 📜index.css
┗ 📜index.jsx// App.js
import React from "react";
import { BrowserRouter, Link, Route, Routes } from "react-router-dom";
import "./App.css";
import About from "./components/About";
import Home from "./components/Home";
function App() {
return (
<BrowserRouter>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</nav>
<Routes>
<Route path="/" exact element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}
export default App;
위 코드에서는 react-router-dom에서 BrowserRouter, Route, Routes,Link 컴포넌트를 가져왔습니다.
BrowserRouter는 리액트 애플리케이션에 HTML5의 History API를 사용하여 라우팅을 처리합니다.Route는 URL 경로와 해당 경로에 맞는 컴포넌트를 매핑합니다.Link는 사용자가 클릭할 수 있는 링크를 생성합니다.
( html의 a태그와 같이 동작합니다, 클릭하면 url창을 to에 적혀 있는 경로로 변경시킵니다 )
🚩 : Link의 동작에 대해서는 다른 게시글로 다시한번 정리하겠습니다.
🐸 : react-router-dom 라이브러리에서 가져온 각 컴포넌트의 사용법을 더 자세히 알고 싶으면 공식문서를 공부하세요.!
이제 홈 페이지와 "About" 페이지의 컴포넌트를 생성해보겠습니다.
// Home.js
import React from 'react';
const Home = () => {
return (
<div>
<h2>Home</h2>
<p>Welcome to the Home page</p>
</div>
);
};
export default Home;// About.js
import React <from 'react';
const About = () => {
return (
<div>
<h2>About</h2>
<p>This is the About page</p>
</div>
);
};
export default About;이제 애플리케이션을 실행하면 홈 페이지와 "About" 페이지 간에 전환할 수 있는 네비게이션이 포함된 애플리케이션이 생성됩니다.
useNavigate 훅을 이용한 프로그래밍 방식 라우팅
useNavigate 훅은 함수형 컴포넌트 내에서 프로그래밍 방식으로 라우팅을 처리하는 데 사용됩니다.
예를 들어, 어떤 이벤트가 발생했을 때 특정 URL로 이동해야 할 때 useNavigate를 사용할 수 있습니다.
🙋🏻 :
프로그래밍 방식으로 라우팅처리가 뭐요!!!
🐸 : 위에서<Link />를 사용하여a태그와 같이 하이퍼링크가 걸려있는 태그를 만들어서 클릭 하면<Route />컴포넌트로 매핑 시켜놓은 컴포넌트를 렌더링하는 것을 볼 수 있었어요.하지만 우리가 어떤 로직을 마치고 페이지를 이동한다거나 할 때
위와같이 html 태그나 화면의 요소들을 사용자가 직접 클릭하는 것이아닌
- 로그인이 성공하면! 메인화면으로 자동으로 이동한다거나?
- 블로그에 게시글 작성페이지에서 출간하기 버튼을 누르면! 저장완료 후 작성글 페이지로 이동된다거나
🐸 : 위와같이 로직상 or 실행한 함수 내부에서 조건을 충족한다면 페이지를 이동 시킬때는 뭐
Link컴포넌트를 사용할 수 없잖아요? 그럴때useNavigate사용하는 거에요
아래 예시를 봅시다
// Login.js
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
const Login = () => {
// 로그인 유무 임시 더미 상태 데이터
const [login, setLogin] = useState(true);
const navigate = useNavigate();
const handleLogin = () => {
if(login){
// 로그인되어 있을경우 about 페이지로 이동한다.
navigate('/about');
}
};
return (
<div>
<h2>About</h2>
<button onClick={handleLogin}>About</button>
</div>
);
};
export default Login;위 코드에서는 useNavigate 훅을 사용하여 로그인 버튼이 클릭되었을 때 /about로 이동하도록 구현되었습니다.
2️⃣ 결론
리액트 라우팅과 네비게이션을 사용하면 여러 페이지 간에 쉽게 전환하고 애플리케이션을 더 사용자 친화적으로 만들 수 있습니다.
끝🙋🏻
💬 : 위 내용에대해 더 궁금한점이 있거나,
틀린내용이 있거나
질문이 있다면 댓글로 달아주세요.!
