ReactJS - 라우팅: React 앱에서 탐색하는 초보자 가이드
안녕하세요, 미래의 React 개발자 여러분! 오늘 우리는 React 라우팅의 세계를 함께 탐험하게 될 것입니다. 여러분의 친절한 이웃 컴퓨터 과학 교사로서, 저는 React 애플리케이션을 다음 단계로 진화시킬 수 있는 필수 개념을 안내해 드리겠습니다. 자리를 잡고 함께潜入에 들어가보겠습니다!
React에서 라우팅이란?
시작하기 전에, 우리는 집을 짓는 상상을 해봅시다. 집의 각 방은 웹 애플리케이션의 다른 페이지와 같습니다. 그런데 방 사이를 이동할 때 집을 매번 다시 지을 필요가 없다면 얼마나 좋을까요? 그게 바로 React에서 라우팅이 하는 일입니다!
라우팅은 단일 페이지 애플리케이션을 만들어 여러 개의 뷰를 생성하여, 사용자가 애플리케이션을 다시 로드하지 않고도 다른 컴포넌트(또는 "페이지") 사이를 이동할 수 있게 합니다. 마치 집의 어떤 방으로든 즉시 이동할 수 있는 마법의 문을 가지고 있는 것과 같습니다!
React Router 설치
React에서 라우팅을 시작하려면 React Router라는 인기 있는 라이브러리를 설치해야 합니다. 걱정 마세요! 아주 쉽습니다.
터미널을 엽니다, React 프로젝트 디렉토리로 이동한 후 다음 명령어를 실행합니다:
npm install react-router-dom이 명령어는 npm(노드 패키지 관리자)가 React Router 패키지를 우리에게 설치하도록 합니다. 설치가 완료되면, 라우팅을 시작할 준비가 됩니다!
React Router: 기본 사용법
이제 React Router를 설치했습니다. 사용법을 배우겠습니다. 간단한 예제부터 시작하여 지식을 점진적으로 쌓아 나갈 것입니다.
Step 1: 필요한 컴포넌트 임포트
먼저, React Router에서 필요한 컴포넌트를 임포트해야 합니다. 주요 App.js 파일의 맨 위에 다음 줄을 추가합니다:
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';Step 2: 라우터 설정
다음으로, 우리는 전체 애플리케이션을 Router 컴포넌트로 감싸겠습니다. 이렇게 하면 React에게 우리 애플리케이션에서 라우팅을 활성화하려는 것임을 알립니다:
function App() {
return (
<Router>
{/* 앱 콘텐츠는 여기에 들어갑니다 */}
</Router>
);
}Step 3: 라우트 정의
이제 라우트를 정의해 보겠습니다. 우리는 Home, About, Contact 세 가지 간단한 컴포넌트를 만들어 보겠습니다.
function Home() {
return <h2>우리 홈 페이지에 오신 것을 환영합니다!</h2>;
}
function About() {
return <h2>이 About 페이지에서 우리에 대해 더 알아보세요.</h2>;
}
function Contact() {
return <h2>이 Contact 페이지를 통해 우리와 연락하십시오.</h2>;
}이 컴포넌트에 대해 라우트를 설정하려면 Route 컴포넌트를 사용합니다:
function App() {
return (
<Router>
<div>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</Router>
);
}이 작업에서는 다음과 같은 일이 일어납니다:
-
exact키워드는 Home 컴포넌트가 path가 정확히 "/" 일 때만 렌더링되도록 합니다. - 각
Route컴포넌트는path속성(URL)과component속성(해당 경로에서 렌더링할 컴포넌트)을 받습니다.
Step 4: 导航 추가
이제 사용자가 이 라우트 사이를 이동할 수 있도록 Link 컴포넌트를 사용하여导航을 추가하겠습니다:
function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</Router>
);
}Link 컴포넌트는 마치 강력한 <a> 태그처럼 작동합니다. 전체 페이지를 다시 로드하지 않고도导航을 가능하게 합니다.
네스티드 라우팅
이제 기본적인 내용을 이해했으므로, 네스티드 라우팅으로 단계를 높이겠습니다. 가정해 보겠습니다. "제품" 페이지가 있고, 그 안에서 다양한 제품 카테고리를 보여주고 싶습니다.
네스티드 라우팅을 설정하는 방법은 다음과 같습니다:
function Products() {
return (
<div>
<h2>우리의 제품</h2>
<ul>
<li>
<Link to="/products/electronics">전자제품</Link>
</li>
<li>
<Link to="/products/books">도서</Link>
</li>
</ul>
<Route path="/products/electronics" component={Electronics} />
<Route path="/products/books" component={Books} />
</div>
);
}
function Electronics() {
return <h3>최신 기기들을 확인해 보세요!</h3>;
}
function Books() {
return <h3> 방대한 도서 모음을 탐험해 보세요!</h3>;
}이 예제에서, Products 컴포넌트는 자신의 라우트를 포함하고 있습니다. "/products/electronics"로 이동할 때, Products 컴포넌트와 Electronics 컴포넌트를 모두 볼 수 있습니다.
React Router의 장점
React Router는 React 애플리케이션에서 라우팅을 처리하는 데 많은 장점을 제공합니다. 이를 몇 가지 더 자세히 설명해 보겠습니다:
| 장점 | 설명 |
|---|---|
| 动态 라우팅 | 라우트는 애플리케이션의 구성 部分로 정의되며, 구성 파일에서는 정의되지 않습니다. |
| 네스티드 라우트 | 복잡한 UI를 쉽게 만들 수 있는 네스티드 라우팅 구조를 쉽게 만들 수 있습니다. |
| 히스토리 제어 | 브라우저의 히스토리 스택에 대한 세밀한 제어를 제공합니다. |
| 코드 분할 | 코드 분할을 쉽게 하여 애플리케이션 성능을 향상시킵니다. |
| 선언적 라우팅 | 라우트를 React 컴포넌트로 정의하여 직관적이고 관리하기 쉽습니다. |
결론
축하합니다! React 라우팅의 세계로 첫 걸음을 뗐습니다. 우리는 설치, 기본 라우팅, 네스티드 라우팅, 그리고 React Router의 장점을 다루었습니다. 기억하시라, 라우팅은 실습을 통해 더 쉬워집니다. 그러므로 자신감 있게 실험하고 자신만의 라우팅 애플리케이션을 만들어 보세요.
마지막으로, 한 학생이 말한 것을 떠올립니다. "React 라우팅은 마치 장시간 실명状态下 maze를 탐색하는 것 같았다." 하지만 같은 학생이 나중에 이렇게 말했습니다. "이제는 map과 flashlight가 있어서 그런다." 이 튜토리얼이 여러분의 React 라우팅 여정에 map과 flashlight를 제공해 주기를 바랍니다.
계속 코딩하고, 계속 배우며, 가장 중요한 것은 놀라운 React 애플리케이션을 만들며 즐거움을 느끼세요!
Credits: Image by storyset