리액트 라우터를 사용하여 웹 애플리케이션을 개발할 때, URL에 프리픽스(prefix)와 포스트픽스(postfix)를 설정하여 경로를 더욱 유연하게 처리할 수 있습니다. 이 글에서는 리액트 라우터에서의 프리픽스와 포스트픽스 설정 방법에 대해 알아보겠습니다.

프리픽스 설정

프리픽스는 URL 경로의 시작 부분에 추가되는 접두사입니다. 이를 통해 특정 경로에 대한 접근을 제한하거나, 여러 애플리케이션을 구분할 수 있습니다. 리액트 라우터에서는 BrowserRouter 컴포넌트의 basename 속성을 사용하여 프리픽스를 설정할 수 있습니다. 예를 들어, 다음과 같이 설정할 수 있습니다:

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

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

위 예제에서 /myapp는 프리픽스로 설정되었습니다. 이제 모든 경로는 /myapp로 시작됩니다.

포스트픽스 설정

포스트픽스는 URL 경로의 끝 부분에 추가되는 접미사입니다. 이를 통해 특정 경로에 대한 접근을 제한하거나, 특정 동작을 수행할 수 있습니다. 리액트 라우터에서는 라우트 컴포넌트의 path 속성에 포스트픽스를 추가하여 설정할 수 있습니다. 예를 들어, 다음과 같이 설정할 수 있습니다:

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

<Route path="/about-us.html" component={AboutUs} />

위 예제에서 /about-us.html은 포스트픽스로 설정되었습니다. 이제 /about-us.html 경로로 접근할 때 AboutUs 컴포넌트가 렌더링됩니다.

결론

리액트 라우터를 사용하여 웹 애플리케이션을 개발할 때, URL에 프리픽스와 포스트픽스를 설정하여 경로를 더욱 유연하게 처리할 수 있습니다. 프리픽스는 BrowserRouter 컴포넌트의 basename 속성을 사용하여 설정하고, 포스트픽스는 각 라우트 컴포넌트의 path 속성에 추가하여 설정할 수 있습니다.

더 자세한 내용은 React Router 공식 문서를 참고하세요.