[javascript] 리액트 라우터의 개발 환경 구성 방법

04 Dec 2023

javascript

리액트 라우터는 리액트 애플리케이션에서 클라이언트 사이드 라우팅을 구현하기 위한 도구입니다. 이번 블로그 포스트에서는 리액트 라우터를 사용하기 위한 개발 환경 구성 방법을 알아보겠습니다.

1. 리액트 애플리케이션 생성하기

먼저, 리액트 애플리케이션을 생성해야 합니다. 다음의 명령어를 사용하여 새로운 리액트 프로젝트를 생성합니다:

npx create-react-app my-app

위 명령어를 실행하면 my-app이라는 이름을 가진 새로운 디렉토리가 생성되고, 필요한 패키지와 구성 파일들이 자동으로 설치됩니다.

2. 리액트 라우터 패키지 설치하기

리액트 애플리케이션 폴더로 이동한 후, 다음의 명령어를 사용하여 리액트 라우터 패키지를 설치합니다:

npm install react-router-dom

위 명령어를 실행하면 react-router-dom 패키지가 설치됩니다.

3. 라우터 구성하기

리액트 라우터를 사용하기 위해서는 라우터를 구성해야 합니다. 이를 위해 src 폴더에 App.js 파일을 열어 다음의 코드를 추가합니다:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

export default App;

위 코드에서는 BrowserRouter를 사용하여 라우터를 생성하고, Route 컴포넌트를 사용하여 각 경로에 해당하는 컴포넌트를 연결합니다. exact 속성을 설정한 라우트는 정확히 해당 경로와 일치할 때만 매칭됩니다.

4. 컴포넌트 생성하기

라우터에 매칭될 컴포넌트를 생성해야 합니다. src/components 폴더에 Home.js와 About.js 파일을 생성하고, 각각 다음의 코드를 추가합니다:

Home.js

import React from 'react';

function Home() {
  return <h1>Welcome to the Home page!</h1>;
}

export default Home;

About.js

import React from 'react';

function About() {
  return <h1>Welcome to the About page!</h1>;
}

export default About;

위 코드에서는 간단한 환영 메시지를 보여주는 컴포넌트를 생성합니다.

5. 애플리케이션 실행하기

이제 애플리케이션을 실행하여 리액트 라우터를 확인해보겠습니다. 다음의 명령어를 사용하여 앱을 실행합니다:

npm start

위 명령어를 실행하면 애플리케이션이 브라우저에서 자동으로 열리고, 기본적으로 Home 컴포넌트가 보여집니다. 브라우저의 주소창에 /about을 추가하면 About 컴포넌트가 보여지는 것을 확인할 수 있습니다.

이제 리액트 라우터를 사용하여 클라이언트 사이드 라우팅을 구현하는 개발 환경을 구성하는 방법에 대해 알아보았습니다.