라우팅 설정하기
Route 컴포넌트로 경로 설정하기
React 프로젝트의 src/index.js 파일 내에서 BrowserRouter 컴포넌트를 사용하여 다른 컴포넌트를 감싸주면 React Router가 적용됩니다.
가장 먼저 각 페이지로 사용하게 될 컴포넌트를 만들어 보겠습니다. 우선 React 프로젝트 src 폴더에 components라는 폴더를 생성합니다. components 폴더에 사용자에게 가장 먼저 보여질 홈 화면인 Home 컴포넌트와 사이트 소개 페이지인 About 컴포넌트를 각각 생성하여 아래와 같이 코드를 작성합니다.
Home.js
const Home = () => {
return (
<div>
<h2>Hello, React!</h2>
<p>사이트에서 가장 먼저 보여지는 페이지입니다.</p>
</div>
);
};
export default Home;
About.js
const About = () => {
return (
<div>
<h2>React 소개</h2>
<p>사이트를 소개하는 페이지입니다.</p>
</div>
);
};
export default About;
이렇게 생성한 컴포넌트를 사용자의 웹 브라우저 URL 경로에 따라 렌더링되도록 하기 위해서는 Route 컴포넌트를 사용하여 라우팅을 설정해 주어야 합니다.
Route 컴포넌트는 React Router에서 가장 중요한 역할을 하는 컴포넌트입니다. Route 컴포넌트는 URL 세그먼트(segment)를 데이터 로딩을 위한 컴포넌트와 연결하는 역할을 수행합니다. 이렇게 설정된 Route 컴포넌트들은 마지막으로 Routes 컴포넌트를 사용하여 감싸줘야 합니다.
Route 컴포넌트 문법
<Route path="URL세그먼트" element={<컴포넌트/>} />
예제(App.js)
import { Routes, Route } from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";
const App = () => {
return (
<div>
<h1>React Router</h1>
<Routes>
<Route path="" element={<Home />} />
<Route path="about" element={<About />} />
</Routes>
</div>
);
};
export default App;
위의 예제가 동작하고 있는 웹 브라우저의 주소창에서 초기 URL 끝에 ‘/about’를 추가한 후 엔터를 누르게 되면, 소개 페이지인 About 컴포넌트가 랜더링 되는 것을 확인할 수 있습니다.
Link 컴포넌트로 링크 설정하기
앞서 살펴본 예제에서는 소개 페이지로 이동하기 위해 웹 브라우저 주소창의 URL을 직접 수정해야 했습니다. 하지만 실제 웹 사이트에서는 다른 페이지로 이동할 때 링크를 사용하는 것이 일반적입니다.
HTML에서는 보통 <a>태그를 사용하여 링크를 설정합니다. 하지만 React Router에서는 <a>태그를 곧바로 사용하지 않고 Link 컴포넌트를 사용하여 다른 페이지로 이동할 수 있는 링크를 설정하게 됩니다. <a>태그를 직접 사용하게 되면 사용자가 해당 요소를 클릭할 때 브라우저가 페이지를 새로 불러오기 때문에 React Router에서는 Link 컴포넌트를 사용해야 합니다.
Link 컴포넌트는 내부적으로 페이지의 리로딩을 막은 상태에서 링크할 리소스를 가리키는 href 속성을 가진 <a>엘리먼트를 렌더링합니다.
Link 컴포넌트 문법
<Link to="상대경로">링크 텍스트</Link>
다음 예제는 앞선 예제에 Link 컴포넌트를 포함하고 있는 Menu 컴포넌트를 추가하여 사용자가 손쉽게 다른 페이지로 이동할 수 있는 메뉴 기능을 추가한 예제입니다.
Menu.js
import { Link } from "react-router-dom";
const Menu = () => {
return (
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/news">News</Link>
</li>
</ul>
</nav>
<hr />
</div>
);
};
export default Menu;
예제(App.js)
import { Routes, Route } from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";
import News from "./components/News";
import Menu from "./Menu";
const App = () => {
return (
<div>
<h1>React Router</h1>
<Routes>
<Route path="/" element={<Menu />} />
<Route path="" element={<Home />} />
<Route path="about" element={<About />} />
<Route path="news" element={<News />} />
</Routes>
</div>
);
};
export default App;
위의 예제를 실행시키면 Menu 컴포넌트에 포함된 Link 컴포넌트가 페이지를 리로딩 하지 않는 <a>태그로 렌더링 된 것을 확인할 수 있습니다.
