React에서 동적 라우팅

 

싱글 페이지 애플리케이션(SPA)의 영역에서 효율적인 탐색 관리는 사용자 경험을 향상시키고 앱과의 원활한 상호작용을 보장하기 위해 필수적입니다. React Router는 React 애플리케이션에서 라우트를 처리하는 강력한 도구로, 개발자들이 웹 앱에서 동적 라우팅을 구현할 수 있게 해줍니다. 이 종합 가이드는 React Router의 핵심 개념을 탐구하며, 실용적인 예시와 함께 효과적으로 제공합니다.

 

React Router를 사용하는 이유:

  • 원활한 SPA 탐색: 탐색 가능하고 북마크 가능한 페이지를 가진 싱글 페이지 애플리케이션 생성을 가능하게 합니다.
  • 동적 라우팅: 동적 라우트 매칭을 통해 복잡한 애플리케이션 구조 관리를 용이하게 합니다.
  • 향상된 사용자 경험: 지연 로딩, 중첩 라우트, 애니메이션 지원으로 전반적인 사용자 경험을 개선합니다.

React Router 시작하기:

1.설치:

프로젝트에 React Router를 설치합니다:

1
npm install reactrouterdom
cs

 

2.기본 설정:

앱의 엔트리 파일(예: index.js)에서 앱의 컴포넌트 트리를 <BrowserRouter>로 감싸서 React Router를 앱에 통합합니다:

1
2
3
4
5
6
7
8
import { BrowserRouter } from ‘react-router-dom’;
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById(‘root’)
);
cs

 

라우트 구현하기:

1.라우트 정의하기:

URL 경로와 컴포넌트 간의 매핑을 정의하기 위해 <Route> 컴포넌트를 사용합니다:

1
2
3
4
5
6
7
8
9
10
11
import { Route, Switch } from ‘react-router-dom’;
function App() {
  return (
    <Switch>
      <Route exact path=“/” component={Home} />
      <Route path=“/about” component={About} />
      <Route path=“/contact” component={Contact} />
    </Switch>
  );
}
cs

 

2.링크로 탐색하기:

앱 내 탐색을 위해 <a> 태그 대신 <Link> 또는 <NavLink>를 사용합니다:

1
2
3
4
5
6
7
8
9
10
11
import { Route, Switch } from ‘react-router-dom’;
function App() {
  return (
    <Switch>
      <Route exact path=“/” component={Home} />
      <Route path=“/about” component={About} />
      <Route path=“/contact” component={Contact} />
    </Switch>
  );
}
cs

 

고급 기능:

1.프로그래매틱 탐색:

프로그래매틱 탐색을 위해 useHistory 훅을 사용합니다:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { useHistory } from ‘react-router-dom’;
function HomeButton() {
  let history = useHistory();
  function handleClick() {
    history.push(“/home”);
  }
  return (
    <button type=“button” onClick={handleClick}>
      홈으로 가기
    </button>
  );
}
cs

 

2.중첩 라우트:

애플리케이션의 라우트를 계층적으로 구성합니다:

1
2
3
<Route path=“/topics” component={Topics}>
  <Route path=“/topics/:topicId” component={Topic}/>
</Route>
cs

 

3.라우트 파라미터:

라우트 파라미터를 사용하여 URL의 동적 부분을 캡처합니다:

1
2
3
function Topic({ match }) {
  return <h3>요청된 토픽 ID: {match.params.topicId}</h3>;
}
cs

 

  • 코드 분할: React.lazy를 사용한 컴포넌트 기반 코드 분할로 로딩 시간을 개선합니다.
  • 인증 및 보호된 라우트: 인증 워크플로우를 구현하여 특정 앱 부분에 대한 접근을 제어합니다.
  • 에러 처리: 경로가 매치되지 않을 때 404 페이지로 처리하기 위해 경로가 없는 <Route> 사용합니다.

React Router는 React로 만든 SPA를 구축하는 데 없어서는 안될 도구로, 라우팅을 처리하기 위한 유연성, 효율성 및 풍부한 기능 세트를 제공합니다. 이 가이드에서 제시된 관행을 따르면 개발자는 React 애플리케이션의 탐색을 향상시키는 데 React Router를 활용할 수 있으며, 개발자와 사용자 모두에게 더 나은 경험을 제공할 수 있습니다.

 

#React Router, SPA 탐색, React에서 동적 라우팅, React 탐색 관리, React Router 가이드

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다