ReactJS - BrowserRouter: React에서 라우팅 시작하기 초보자 가이드

안녕하세요, React 개발자 지망생 여러분! 오늘 우리는 React 애플리케이션의 라우팅 세계로 흥미로운 여정을 떠납니다. 초보자라도 걱정하지 마세요; 친절한 안내자로서 나는 모든 것을 단계별로 설명해드릴게요. 커피 한 잔을 마시고, 이제 시작해보겠습니다!

ReactJS - BrowserRouter

라우터 개념

라우팅이란?

대형 도서관에 있다고 상상해보세요. 특정 책을 찾고 싶지만, 어디에 있는지 모릅니다. 이때 도서관 목록이 유용하게 쓰입니다. 그것은 정확히 어떤 책장을 둘러보아야 할지 알려줍니다. 웹 애플리케이션에서 라우팅은 비슷하게 작동합니다. URL에 따라 어떤 컴포넌트를 표시해야 하는지 알려주는 지도와 같은 역할을 합니다.

왜 라우팅이 필요한가요?

자신의 개인 웹사이트를 만들 때, 홈, 소개, 연락처 등 다양한 페이지가 있을 수 있습니다. 라우팅 없이는 사용자 행동에 따라 컴포넌트를 수동으로 표시하고 숨겨야 합니다. 이는 귀찮고 실수가 많습니다. 라우팅은 이 과정을 자동화하여 애플리케이션을 더욱 체계적이고 사용자 친화적으로 만듭니다.

BrowserRouter 소개

React 세계에서 우리는 BrowserRouter라는 훌륭한 도구를 가지고 있습니다. react-router-dom 라이브러리의 일부로, React 애플리케이션에서 라우팅을 구현하는 데 도움을 줍니다. 이를 우리 애플리케이션의 개인 도서관 사서라고 생각해보세요. 언제나 사용자를 적절한 "책" (또는 우리의 경우, 컴포넌트)으로 안내해줍니다.

라우터 적용 방법

이제 개념을 이해했으니, 코드로 손을 대보겠습니다!

Step 1: 설치

먼저, react-router-dom 패키지를 설치해야 합니다. 터미널을 엽니다고 다음을 실행합니다:

npm install react-router-dom

Step 2: BrowserRouter 설정

먼저, 주요 App 컴포넌트를 BrowserRouter로 감싸겠습니다. 이렇게 합니다:

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';

const Root = () => (
<Router>
<App />
</Router>
);

export default Root;

이 예제에서 우리는 BrowserRouter를导입하고 Router로 이름을 바꿔 간편하게 사용합니다. 그런 다음 App 컴포넌트를 Router로 감싸 애플리케이션 전체에 라우팅 컨텍스트를 설정합니다.

Step 3: 라우트 정의

이제 App 컴포넌트에 라우트를 정의해보겠습니다:

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

const App = () => (
<div>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</div>
);

export default App;

이를 설명해보겠습니다:

Route와 Switch를 react-router-dom에서导입합니다.
Switch는 동시에 하나의 라우트만 렌더링되도록 합니다.
각 Route 컴포넌트는 URL 경로와 React 컴포넌트 간의 매핑을 정의합니다.
홈 라우트에 exact 속성을 추가하면 정확한 경로 "/"에만 매칭됩니다.

Step 4: 네비게이션 생성

이제 애플리케이션에 네비게이션을 추가해보겠습니다:

import React from 'react';
import { Link } from 'react-router-dom';

const Navigation = () => (
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</nav>
);

export default Navigation;

여기서 우리는 react-router-dom의 Link 컴포넌트를 사용하고 있습니다. 이는 <a> 태그와 비슷하지만, 네비게이션 시 페이지 새로고침을 방지합니다.

Step 5: 모든 것을 통합

이제 App 컴포넌트에 네비게이션을 추가해보겠습니다:

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Navigation from './components/Navigation';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

const App = () => (
<div>
<Navigation />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</div>
);

export default App;

그렇게 하면 기본 React 애플리케이션에 라우팅이 설정되었습니다.

고급 라우팅 기술

이제 기본적인 내용을 다루었으니, 몇 가지 고급 기술을 살펴보겠습니다:

1. URL 매개변수

때로는 URL을 통해 데이터를 전달하고 싶을 수 있습니다. 예를 들어, 사용자 프로필 페이지:

<Route path="/user/:id" component={UserProfile} />

UserProfile 컴포넌트에서 id 매개변수에 접근할 수 있습니다:

import { useParams } from 'react-router-dom';

const UserProfile = () => {
let { id } = useParams();
return <h1>User Profile for user {id}</h1>;
};

2. 내장 라우트

컴포넌트 내에 라우트를 중첩할 수 있습니다. 이는 복잡한 레이아웃에 유용합니다:

const App = () => (
<div>
<Navigation />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/users" component={Users} />
</Switch>
</div>
);

const Users = () => (
<div>
<h1>Users</h1>
<Switch>
<Route exact path="/users" component={UserList} />
<Route path="/users/:id" component={UserProfile} />
</Switch>
</div>
);

3. 프로그래밍 방식 네비게이션

양식 제출 후와 같이 프로그래밍 방식으로 네비게이션을 원할 수 있습니다:

import { useHistory } from 'react-router-dom';

const LoginForm = () => {
let history = useHistory();

const handleSubmit = () => {
// ... form submission logic
history.push('/dashboard');
};

return (
<form onSubmit={handleSubmit}>
{/* form fields */}
</form>
);
};

라우팅 메서드 표

이제 우리가 논의한 주요 라우팅 메서드를 요약하는 표를 제공합니다:

메서드	목적	예제
`<BrowserRouter>`	애플리케이션을 감싸 라우팅을 활성화	`<BrowserRouter><App /></BrowserRouter>`
`<Route>`	라우트 정의	`<Route path="/about" component={About} />`
`<Switch>`	하나의 라우트만 렌더링	`<Switch><Route ... /><Route ... /></Switch>`
`<Link>`	라우트로의 링크 생성	`<Link to="/about">About</Link>`
`useParams()`	URL 매개변수 접근	`let { id } = useParams();`
`useHistory()`	프로그래밍 방식 네비게이션	`history.push('/dashboard');`

그렇게 하면 React에서 라우팅을 시작하는 방법에 대한 초보자 가이드를 마친 것입니다. 연습이 완벽을 만들어요, 그러니 자신의 프로젝트에서 이 개념들을 실험해보세요.

기쁜 코딩과 언제나 올바른 컴포넌트로 이어지는 라우트를 바랍니다!

Credits: Image by storyset