라우팅
사용자가 웹사이트를 접근할 때, URL에 따라 서로 다른 컴포넌트를 화면에 표시해줄 수 있다. 이것을 라우팅이라고 한다.
예를 들어서 사용자가 접속한 URL이 www.naver.com?mode=dark 라고 가정해보자.
경로(path): www.naver.com
쿼리(query): mode=dark
경로와 쿼리 부분을 바탕으로 해당 컴포넌트를 렌더링하는 것, 이 과정을 라우팅이라고 한다.
리액트에서는 react-router 라이브러리를 이용하여 라우팅을 구현할 수 있다.
1. 리액트 라우터 라이브러리 설치
npm install react-router-dom
2. 페이지 컴포넌트 정의
// Home 컴포넌트
import React from 'react';
const Home = () => {
return (
<div>
<h1>홈</h1>
<p>홈페이지에 오신 것을 환영합니다!</p>
</div>
);
};
// About 컴포넌트
import React from 'react';
const About = () => {
return (
<div>
<h1>소개</h1>
<p>이 애플리케이션에 대한 정보입니다.</p>
</div>
);
};
// Contact 컴포넌트
import React from 'react';
const Contact = () => {
return (
<div>
<h1>연락처</h1>
<p>문의 사항은 여기로 보내주세요.</p>
</div>
);
};
3. 라우터 설정
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
const App = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</BrowserRouter>
);
};
export default App;
4. 링크 추가
// Home 컴포넌트
import React from 'react';
import { Link } from 'react-router-dom';
const Home = () => {
return (
<div>
<h1>홈</h1>
<p>홈페이지에 오신 것을 환영합니다!</p>
<Link to="/about">소개 페이지로 이동</Link>
<Link to="/contact">연락처 페이지로 이동</Link>
</div>
);
};
'Frontend > React' 카테고리의 다른 글
[React] 리액트 라이프 사이클 (0) | 2024.02.05 |
---|---|
Virtual DOM (0) | 2023.03.11 |