[React Router] React Router - Basic Components

리액트 라우터는 다음과 같은 세 가지 컴포넌트가 존재한다

 

1. Router Components
2. Route Matching Components
3. Navigation Components

우리가 웹에서 사용할 모든 컴포넌트는 react-router-dom에서 임포트 한다

import { BrowserRouter, Route, Link } from "react-router-dom";

본격적으로 각 라우터 컴포넌트들에 대해서 알아보도록 하자

 

 

 

Routers

 

리액트 라우터의 핵심은 바로 라우터 컴포넌트이다. react-router-dom 에서는 두 가지 라우터 컴포넌트를 제공하는데, <BrowserRouter>와 <HashRouter>가 존재한다. 이 두 가지 컴포넌트 모두 history라는 오브젝트를 생성한다. history는 자바스크립트가 실행되는 환경에서 session을 쉽게 관리할 수 있게 해주는 라이브러리이다. 일반적으로, request에 따른 response를 제공하는 서버가 존재하면 <BrowserRouter>를 사용하고, 정적 파일을 제공할 때에는 <HashRouter>를 사용한다

import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  holder
);

 

 

 

Route Matching

 

리액트 라우터는 두 가지 라우트 매칭 컴포넌트를 제공하는데, <Route>와 <Switch>가 존재한다

import { Route, Switch } from "react-router-dom";

라우트 매칭은 <Route>의 path prop과 현재 location의 pathname을 비교하면서 이루어진다. 만약 매칭 된다면 매칭 된 콘텐츠를 렌더링 하고, 아니면 null을 렌더링 한다. path가 주어지지 않은 <Route>는 항상 매칭 된다

// when location = { pathname: '/about' }
<Route path='/about' component={About}/> // renders <About/>
<Route path='/contact' component={Contact}/> // renders null
<Route component={Always}/> // renders <Always/>

우리는 location에 기반하여 콘텐츠가 렌더링 되길 원하는 곳 어디에서든지 <Route>를 사용할 수 있다. <Route>를 연속적으로 나열하여 사용하는 경우가 일반적인데, 이 <Route>들을 그룹화시킬 때 사용하는 것이 <Switch> 컴포넌트이다

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/contact" component={Contact} />
</Switch>

<Route>들을 그룹화시키기 위해 항상 <Switch>가 요구되는 것은 아니다. 그러나 이는 매우 유용하게 쓰일 수 있다. <Switch>는 모든 자식 <Route> 요소들을 순회하며 현재 location에 매칭 되는 첫 번째 <Route>만을 렌더링한다. 이는 location의 pathname에 매칭되는 여러 path들이 존재하거나, 라우트 간의 전환에 애니메이션을 부여하거나, 현재 location에 매칭되는 라우트가 존재하지 않을 때 사용하면 원하는 의도대로 동작하게 만들 수 있다(라우트가 존재하지 않으면 당신만의 '404' 컴포넌트를 단순히 넘겨주면 된다)

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/contact" component={Contact} />
  {/* when none of the above match, <NoMatch> will be rendered */}
  <Route component={NoMatch} />
</Switch>

 

 

 

Route Rendering Props

 

주어진 <Route>에 컴포넌트를 렌더링 하는 prop으로 주어질 수 있는 것은 다음 세 가지다

 

1. component
2. render
3. children

거의 대부분의 경우에서 우리가 접하게 될 것은 component와 render이므로, children에 대해서는 따로 설명하지 않도록 하겠다. 여기에서 위 세가지 각각에 대한 자세한 설명을 확인할 수 있다

 

component는 당신이 렌더링 하고자 하는 컴포넌트를 받아서 렌더링 한다. render는 인라인 함수를 취하는데, 오직 당신이 렌더링 하고자 하는 컴포넌트에 지역 변수를 넘겨주고자 할 때 사용되어야 한다. 절대로 component에 인라인 함수를 넘겨주는 짓을 하지 말아야 하는데, 이는 당신이 의도하지 않은 mount/unmount를 유발할 수 있기 때문이다

const Home = () => <div>Home</div>;

const App = () => {
  const someVariable = true;

  return (
    <Switch>
      {/* these are good */}
      <Route exact path="/" component={Home} />
      <Route
        path="/about"
        render={props => <About {...props} extra={someVariable} />}
      />
      {/* do not do this */}
      <Route
        path="/contact"
        component={props => <Contact {...props} extra={someVariable} />}
      />
    </Switch>
  );
};

 

 

 

Navigation

 

리액트 라우터는 <Link> 컴포넌트로 링크를 생성한다. <Link>는 <a> 요소처럼 렌더링 된다

<Link to="/">Home</Link>
// <a href='/'>Home</a>

<NavLink>는 현재 location의 pathname과 <NavLinnk>의 to 속성이 매칭 될 때 스타일을 부여할 수 있는 특수한 <Link>이다

// location = { pathname: '/react' }
<NavLink to="/react" activeClassName="hurray">
  React
</NavLink>
// <a href='/react' className='hurray'>React</a>

만약 당신이 강제로 내비게이션 시키고자 한다면, <Redirect> 컴포넌트를 사용하면 된다. <Redirect>가 렌더링 될때, 해당 컴포넌트의 to 속성으로 바로 네비게이션 시킨다

<Redirect to="/login" />

 

 

 

Review

 

지금까지 React Router에서 제공하는 세 가지 기본적인 라우팅 컴포넌트에 대해서 알아보았다. 배운 내용을 정리하면 다음과 같다

 

• Router Components - <BrowserRouter>, <HashRouter>가 존재하며 <Route> 컴포넌트들을 자식으로 갖는다
• Route Matching Components - <Route>, <Switch>가 존재하며 현재 location의 pathname과 매칭 되는 path로 라우팅 한다. <Switch>는 여러 <Route>들을 그룹화시킬 때 유용하게 사용된다
• Navigation Components - <Link>, <NavLink>가 존재하며 강제로 내비게이션 시키기 위해서는  <Redirect>를 사용한다 

 

다음 포스팅에서는 서버 사이드 렌더링에 대해서 알아보도록 하자