Meet React Router 5.1

• 몇가지 hooks가 추가되었다.

• React Router는 현재 location(or URL)를 위한 state container이다.

  → location을 업데이트 하기 위한 Link그리고 history API와 같은 관련된 tool을 제공한다.

• 아래의 글에선 react에 hooks를 적용하면서 어떤 점을 개선할 수 있었는지를 예시를 통해 설명해준다.

:: useParams

1. 기존의 방식

1. match props를 이용하여 params에 해당하는 정보를 받아온다.
2. 받아온 params를 Route component의 component props나 render props의 매개변수로 이를 넘겨준다.

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

// In the code below, BlogPost is used as both a <Route component>
// and in a <Route render> function. In both cases, it receives a `match`
// prop, which it uses to get the URL params.
function BlogPost({ match }) {
  let { slug } = match.params
  // ...
}

ReactDOM.render(
  <Router>
    <div>
      <Switch>
        {/* Using the `component` prop */}
        <Route path="/blog/:slug" component={BlogPost} />

        {/* Using the `render` prop */}
        <Route
          path="/posts/:slug"
          render={({ match }) => <BlogPost match={match} />}
        />
      </Switch>
    </div>
  </Router>,
  document.getElementById('root')
)

2. 기존 방식의 문제점

1. component props를 이용한 경우

• component props를 이용한 경우에는 custom props를 렌더링하는 component로 전달해줄 수가 없다는 문제가 있다.

2. render props를 이용한 경우

• 1번 방식과 다르게 custom props를 넘겨줄 수는 있지만 콜백에서 얻은 값(match)를 수동적으로 component에 명시하여 전달해주어야해서 불편하다.

3. 두 방식 모두

• 두 방식 모두 Route를 통해서 match로 얻은 params 내려주기 때문에 Route로 렌더링하는 BlogPost에서만 해당 params를 확인할 수 있다.
• 더 낮은 레벨의 component로 전달하기 위해서 2번 방식에서 했던 것처럼 명시적으로 component에 명시하여 전달해주어야 한다. → 불편한 방식

3. useParams 사용하기

useParams를 통한 개선점

1. params를 얻기 위해서 기존에 살펴봤던 방식처럼 component composition tricks들을 사용하지 않아도 된다.

   → 단지 children element를 사용하면 됩니다.