리액트 라우터는 싱글 페이지 애플리케이션(SPA)을 개발할 때 주소 변경을 감지하고 적절한 컴포넌트를 렌더링하는 기능을 제공합니다. 이를 통해 사용자가 브라우저의 주소를 변경하면 해당 주소에 맞는 화면을 보여줄 수 있습니다. 이 기능을 활용하여 리액트 애플리케이션의 상태를 관리할 수도 있습니다. 이번 글에서는 주소 변경을 감지하는 방법과 주소에 따라 상태를 관리하는 방법을 알아보겠습니다.

1. 리액트 라우터 설치 및 설정

리액트 라우터를 사용하기 위해 먼저 패키지를 설치해야 합니다. npm이나 yarn을 사용하여 아래 명령어로 설치할 수 있습니다.

npm install react-router-dom

설치 후에는 react-router-dom 패키지에서 제공하는 Router, Switch, Route 등의 컴포넌트를 사용하여 라우팅을 설정할 수 있습니다.

2. 주소 변경 감지

리액트 라우터에서 주소 변경을 감지하기 위해서는 Router 컴포넌트를 사용해야 합니다. Router 컴포넌트는 애플리케이션에 라우팅 기능을 추가하는 역할을 합니다. 주로 BrowserRouter나 HashRouter를 사용하는데, 이 중 BrowserRouter는 HTML5의 History API를 이용하여 주소를 변경하고, HashRouter는 URL의 해시값을 이용하여 주소를 변경합니다.

아래는 BrowserRouter를 사용한 예시입니다.

import { BrowserRouter as Router } from 'react-router-dom';

const App = () => {
  return (
    <Router>
      {/* route components */}
    </Router>
  );
};

이렇게 Router 컴포넌트로 앱을 감싼 후, 내부에 Switch와 Route 컴포넌트를 사용하여 실제 라우팅을 정의할 수 있습니다.

3. 주소에 따른 상태 관리

리액트 라우터를 사용하면 주소 전환에 따라 다른 컴포넌트를 보여줄 수 있습니다. 이를 통해 특정 주소에 따라 상태를 관리할 수 있습니다.

예를 들어, 사용자가 /users로 접속했을 때, 사용자 목록을 가져오는 API 요청을 보내고, 결과를 상태로 관리하고 싶다고 가정해봅시다. 이를 위해 useState 훅을 사용하여 상태를 정의하고, 해당 주소로 접속했을 때 API 요청을 보내는 로직을 작성할 수 있습니다.

import { useState, useEffect } from 'react';
import { Switch, Route } from 'react-router-dom';

const Users = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('/api/users')
      .then(response => response.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <div>
      {/* render users */}
    </div>
  );
};

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/users" component={Users} />
        {/* other routes */}
      </Switch>
    </Router>
  );
};

위 예시에서는 /users 경로에 접속하면 Users 컴포넌트가 렌더링되고, 그 안에서 API 요청을 보내 사용자 목록을 가져오고 있습니다.

이와 같이, 리액트 라우터를 사용하면 주소 변경을 감지하여 적절한 컴포넌트를 렌더링하고, 해당 컴포넌트 안에서 상태를 관리할 수 있습니다. 이를 통해 브라우저의 주소에 따라 다양한 기능을 구현할 수 있습니다.

위 내용은 리액트 라우터의 간단한 사용 예시입니다. 더 자세한 내용은 공식 문서를 참고하시기 바랍니다.