spa를 만들기 위한 필수 재료: react-router

리액트스럽게 라우팅할 수 있는 방법이 있다. 바로 third-party를 이용하는 것인데 그중에 가장 유명한 react-router에 대해 간략 소개를 하겠다. 얼마전에 v6를 공개하였는데 v5에 비해서 바뀐 문법이 꽤나 많다.

nike shoes를 소개하는 홈피를 만들어봄으로써 간략하게 react-router v6에 대해 소개해보려고 한다.

더 자세한 내용은 공식홈피로!

일단 first things first! 다운 받도록 하자! 나는 npm을 통해서 다운받았다.

우선 라우팅을 적용하려면 BrowserRouter으로 감싸야한다. index.js에서 App전체를 감쌌다.

import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.querySelector('#root')
);

자 그럼 토대는 완성이 되었다. 이제 본격적으로 시작해보도록하자!

일단 App 컴포넌트로 대략적인 content를 짜보았다.

import React, { Component } from 'react';
import {
  Routes,
  Route,
  Link,
  NavLink,
  Outlet,
  useParams,
  useNavigate,
  useLocation,
  Navigate,
} from 'react-router-dom';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      // Routes 밖에 있는것은 그대로 page에 유지 되고 Routes 안에 있는것만 switch 된다.(그래서 v5에선 routes가 switch 였다.)
      <div>
        <nav>
          <NavLink
            className={({ isActive }) =>
              'nav-link' + (isActive ? ' link-active' : '')
            }
            to="/"
          >
            Home
          </NavLink>
          <NavLink
            className={({ isActive }) =>
              'nav-link' + (isActive ? ' link-active' : '')
            }
            to="/launch"
          >
            Launch
          </NavLink>
        </nav>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/launch" element={<Launch />}>
            <Route path="/launch" element={<LaunchIndex />} />
            <Route path=":s" element={<LaunchShoe />} />
          </Route>
          <Route path="*" element={<NotFound />} />
        </Routes>
      </div>
    );
  }
}

라우터를 한번도 사용해보지 않은 사람은 일단 이게 무슨 말인가 싶을거다. 근데 내용은 간단하다.

NaVLink라는 것으로 anchor를 만들어준다. NavLink/Link는 사실 <a>태그를 리턴한다. 그러나 서버에 get을 요청하는 기능이 prevent되어있다. 그리고 이름그대로 to로 user를 이동시켜준다.

NavLink와 Link의 차이점은 isActive paramter를 통해 클래스를 토글할 수 있다는 점이다.

그리고 밑으로 가보면 갈림길이 본격적으로 생긴다. Route를 통해서 길을 낼 수 있고 그 길들을 Routes가 관리한다. Routes안에서 길이 갈린다. 그래서 Routes를 v5에서는 Switch라고 불렀다. 이름에는 다 이유가 있는법!

그리고 Route안에는 path를 지정할 수 있다. 이 path에 도달하면 element안에 있는 것이 리턴이 된다.

그리고 nested routing이 가능하다. Route의 클로징태그를 열고 그안에 또다시 Route를 설정하면 nested되면서 child Route가 생겨난다. 경로도 상대경로라서 부모 Route의 경로를 적어주지 않아도 된다.

근데 기호들이 보인다?

:,* 요건 뭐지?

:는 url마지막에 붙는 slug를 뜻한다. 즉 dynamic하게 path설정이 가능하다는 말이다.

  <Route path="/launch" element={<Launch />}>
    <Route path="/launch" element={<LaunchIndex />} />
    <Route path=":s" element={<LaunchShoe />} />
  </Route>

는 무슨 말이냐면 /launch:blahblah 로 url이 설정되면 LaunchShoe 컴포넌트를 랜더링하라는 말이다.

예를 들어 launch/jordan5라고 url이 설정되면 LaunchShoe에서 jordan5만 추출해서 그에 해당되는 정보를 rendering한다.

일단 이렇게만 알아두고 추후 서술을 덧붙이겠다.

그럼 컴포넌트에 대해 더 자세히 알아보자.