리액트 라우터는 싱글 페이지 애플리케이션(SPA)에서 URL을 처리하고 컴포넌트를 렌더링하는데 사용되는 라이브러리입니다. 리액트 라우터를 사용하여 애플리케이션의 라우팅 계층 구조를 설계하고 명명 규칙을 따르는 것은 애플리케이션의 유지 보수성과 확장성을 높이는 데 도움이 됩니다. 이번 포스트에서는 리액트 라우터의 라우팅 계층 구조와 명명 규칙에 대해 자세히 알아보겠습니다.

계층 구조

리액트 라우터는 중첩된 컴포넌트 구조를 사용하여 라우팅을 관리합니다. 애플리케이션의 페이지는 부모 컴포넌트에서 자식 컴포넌트로 하위 계층 구조를 형성합니다. 이를 통해 핵심 컴포넌트를 표현하고 서브 컴포넌트를 추가하는 방식으로 애플리케이션의 화면을 구성할 수 있습니다. 일반적으로 상위 컴포넌트는 네비게이션 바 또는 레이아웃과 같은 공통 요소를 포함하고 있으며, 하위 컴포넌트는 페이지별로 다른 콘텐츠를 렌더링합니다.

명명 규칙

라우팅 경로와 해당 경로에 대응하는 컴포넌트에는 명명 규칙을 따라야 합니다. 이를 통해 개발자들은 라우팅 구조를 쉽게 이해하고 유지 보수할 수 있습니다.

일반적으로 라우팅 경로는 해당 페이지의 고유한 경로를 반영해야 합니다. 경로의 구성은 /로 시작하고 계층적인 구조를 표현하는데 사용됩니다. 예를 들어, 사용자 목록 페이지의 경로는 /users이고, 특정 사용자의 상세 정보 페이지의 경로는 /users/:id입니다. :id 부분은 다이나믹 라우팅 파라미터로 사용되며, 사용자의 고유한 식별자를 나타냅니다.

각 경로에 대응하는 컴포넌트 명도 일반적인 명명 규칙을 따라야 합니다. 컴포넌트 명은 해당 페이지의 기능을 명확히 표현해야 하며, 대문자로 시작하는 파스칼 표기법을 사용하는 것이 일반적입니다. 예를 들어, 사용자 목록 페이지의 컴포넌트는 UsersPage이고, 사용자 상세 정보 페이지의 컴포넌트는 UserDetailPage입니다. 이러한 명명 규칙은 코드의 가독성을 향상시키고 다른 개발자들과의 협업을 원활하게 만듭니다.

예제 코드

// App.js

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import HomePage from './components/HomePage';
import UsersPage from './components/UsersPage';
import UserDetailPage from './components/UserDetailPage';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route exact path="/users" component={UsersPage} />
        <Route exact path="/users/:id" component={UserDetailPage} />
      </Switch>
    </Router>
  );
}

export default App;

위의 예제 코드는 간단한 애플리케이션을 위한 라우팅 계층 구조를 보여줍니다. / 경로는 홈 페이지에 대응하고, /users 경로는 사용자 목록 페이지에 대응합니다. /users/:id 경로는 특정 사용자의 상세 정보 페이지에 대응하며, :id는 사용자의 고유한 식별자를 나타냅니다.

참고 자료

• React Router 공식 문서