React Router 배워보기

테스트를 하다보니 url이 초기화 되기도 하고 개꼴받아서,
React Router를 넣어보기로 했다.

전부터 알고있기는 했고 써보기도 하긴 했는데,
그때는 그냥 대애충 갖다 쓰는 수준이어서, 이번에 공부해보기로 했다.

---

React Router란?

React Router란 React를 이용하는 프로젝트에서, url 변경을 감지하거나 변경하고,
그에 맞게 출력을 할 수 있도록 하는 NPM 패키지다.

ReactRouter는 크게 두가지로 볼 수 있는데,

URL을 변경하는 Link와
URL에 따라 화면을 구성하는 Route로 구성되어 있다.

<Router>
  <Link to="/abc">누르면 /abc로 갑니다</Link>
  // ...
  <Route path="/">홈 페이지</Route>
  <Route path="/abc">위의 링크 누르면 보입니다</Route>
</Router>

보다시피 겉을 Router로 감싸고, 내부에 Link로 이동하고, Route로 출력한다.

---

<Router>는 뭘까?

<Router>는 코드의 가장 바깥부분에 감싸는(Wrap) 엘리먼트다.

어? 가장 바깥? 그럼 뭐다?
컨텍스트(Context)다.

실제 코드를 보면 RouterContext.Provider로 감싼다.

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Router.js

ReactTraining/react-router

코드가 읽기 복잡하긴 한데 경로인 match를 children으로 내려주는 것을 볼 수 있다. 

---

<Route>의 내부는 어떨까?

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Route.js

ReactTraining/react-router

자식에게 context의 내용과 location, match를 내려주는 것을 볼 수 있다.

그리고 match가 True로 판정되거나 children의 타입이 function이면 출력하고,
아니면 null을 출력한다.

그렇기 때문에 Path가 안 맞으면 null이 되어서 출력되지 않는 것이다.

여기서 의문점이 들었다.

그렇다면, Route안에서 Hook을 사용하면 순서가 망가지지 않나?

그래서 바로 실험을 시작했다.

import { Route, Link } from 'react-router-dom';
import { useState } from 'react';

function ComponentA(props) {
  const [a, setA] = useState(0);

  return (
    <div>여기는 A입니다</div>
  )
}

function ComponentB(props) {
  const [b, setB] = useState(0);

  return (
    <div>여기는 B입니다</div>
  )
}

function App() {
  return (
    <div className="App">
        <Link to="/a">a로 가는 버튼</Link>
        <Link to="/b">b로 가는 버튼</Link>
        <Route path="/a">
          <ComponentA />
        </Route>
        <Route path="/b">
          <ComponentB />
        </Route>
    </div>
  );
}

export default App;

... 잘 된다.

이를 통하여 출력이 null이라도, return이 되기만 한다면
Hook이 정상적으로 작동한다는 것을 알 수 있다.

---

참고 영상

https://www.youtube.com/watch?v=cKnc8gXn80Q&t=542s