공기질 모니터링 서비스_2_React Router

🧭 React Router 도입 회고

우리 페이지는 Login, Device List, Sensor Chart — 이렇게 세 개의 페이지로 구성되어 있다.
Device List에서 특정 Device_Id를 클릭하면 Sensor Chart로 이동하도록 구현했다.

초기에 React Router를 사용하지 않고 상태(selectedDeviceId)를 이용해 페이지 전환을 구현했다.
하지만 이 방식은 URL이 변경되지 않기 때문에 브라우저의 “뒤로가기” 기능이 작동하지 않는 문제가 있었다.

그래서 React Router를 도입하기로 결정했다.

⚙️ React Router란?

React Router는 React 애플리케이션에서 여러 “페이지”처럼 보이는 화면 전환을 구현할 수 있게 해주는 클라이언트 사이드 라우팅 라이브러리이다.
실제로는 단 하나의 HTML 파일(index.html)만 로드되지만,
사용자는 /, /about, /contact 같은 경로로 이동할 수 있고,
URL에 따라 다른 React 컴포넌트가 렌더링된다.

이번 프로젝트에서는 다음과 같이 URL 경로를 구성했다:

• /login → Login 페이지
• /devices → Device List 페이지
• /devices/:deviceId → Sensor Chart 페이지

        <Route
          path="/login"
          element={
            loginData ? <Navigate to="/devices" replace /> : <LoginPage onLoginSuccess={setLoginData} />
          }
        />
        <Route
          path="/devices"
          element={
            loginData ? <DeviceList userId={loginData.user_id} /> : <Navigate to="/login" replace />
          }
        />
        <Route
          path="/devices/:deviceId"
          element={loginData ? <SensorChart /> : <Navigate to="/login" replace />}
        />

이런식으로 Route path를 통해 URL 경로를 설정해주고, element로 컴포넌트를 연결시켜주면 된다.

🚧 Trouble Shooting

초기에는 selectedDeviceId 상태를 이용해 페이지 전환을 제어했는데, 이 방식에는 문제가 있었다:

• selectedDeviceId는 React 상태일 뿐, URL은 바뀌지 않았다.
• React Router는 URL을 기준으로 어떤 컴포넌트를 렌더링할지 결정하기 때문에,
  상태를 바꿔도 실제 페이지 이동은 발생하지 않았다.

          <Route
            path="/devices"
            element={
              loginData ? (
                <DeviceList
                  userId={loginData.user_id}
                  onDeviceClick={(deviceId) => setSelectedDeviceId(deviceId)}
                />
              ) : (
                <Navigate to="/login" replace />
              )
            }
          />

          <Route
            path="/devices/:deviceId"
            element={
              loginData && selectedDeviceId ? (
                <SensorChart
                  device_id={selectedDeviceId}
                  onBack={() => setSelectedDeviceId(null)}
                />
              ) : (
                <Navigate to="/login" replace />
              )
            }
          />

이를 해결하기 위해 상태 기반 전환 → URL 기반 전환으로 변경했다.
useNavigate를 사용하여 deviceId 클릭 시 경로를 직접 변경하도록 수정했다

DeviceList.js

<tr key={device.device_id} className="hover:bg-gray-50" onClick={() => navigate(`/devices/${device.device_id}`)}>

기존 sensor chart 페이지에서도 url을 통해 deviceId를 가져오도록 설정해주었다.

SensorChart.js

const { deviceId } = useParams();

이렇게 변경하면 브라우저 히스토리에 기록되므로 “뒤로가기”도 자연스럽게 작동한다.

마지막으로, React Router를 사용하려면 전체 앱을 BrowserRouter로 감싸야 한다.

import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

BrowserRouter는 브라우저의 주소 변화를 감시하고, 그에 따라 어떤 컴포넌트를 렌더링할지를 결정한다.