Colin's Blog
[javascript] 라우터 컴포넌트의 역할과 기능

라우터 컴포넌트는 웹 애플리케이션에서 네비게이션을 관리하고 페이지 간의 전환을 제어하는 역할을 합니다. 이는 다양한 페이지를 가진 복잡한 애플리케이션에서 특히 유용하며, 사용자 경험과 애플리케이션의 성능을 개선하는 데 도움이 됩니다.

라우터 컴포넌트의 기능

  1. URL 관리: 라우터 컴포넌트는 URL을 기반으로 페이지를 렌더링하고, 현재 페이지의 URL을 추적합니다. 이를 통해 사용자는 뒤로가기, 앞으로가기와 같은 브라우저의 네비게이션 동작을 할 수 있습니다.

  2. 페이지 렌더링: 라우터 컴포넌트는 URL에 따라 해당하는 컴포넌트를 렌더링합니다. 예를 들어, /home 경로에 대한 컴포넌트는 홈 페이지를 렌더링하고, /about 경로에 대한 컴포넌트는 소개 페이지를 렌더링합니다.

  3. 중첩된 라우팅: 라우터 컴포넌트는 중첩된 경로에 대한 처리도 가능합니다. 이를 통해 애플리케이션을 계층적으로 구성하고, 복잡한 페이지 구조를 표현할 수 있습니다.

  4. 매개변수와 쿼리 파라미터 처리: 라우터 컴포넌트는 동적 URL을 처리하는 기능을 제공합니다. URL에 변수를 포함시켜 특정 데이터를 전달하거나, 쿼리 파라미터를 이용해 특정 동작을 수행할 수 있습니다.

예시 코드

다음은 React.js의 라우터 컴포넌트를 사용하는 예시 코드입니다.

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import NotFound from './components/NotFound';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
}

export default App;

위의 코드에서 BrowserRouter, Route, Switch 컴포넌트를 사용하여 URL과 컴포넌트를 매핑하고, exact 키워드를 사용하여 정확한 경로일 때만 매칭하도록 설정했습니다.

참고 자료

© 2018 Colin. All rights reserved.