react router dom v6 - 사라진 match, location, history props

경험이 기록으로·2022년 8월 19일

react-router

목록 보기

1/1

요즘 Redux를 공부하기 위해 니콜라스의 무료 Redux 강의를 수강하고 있는데
강의 코드 중 react-router의 버전 차이로 인해 겪었던 route props에 관련한 이슈를 정리해보려고 한다.

1. 마주한 문제

우선 내가 마주한 문제는 이렇다.
react 컴포넌트에서 아무리 props를 출력해도 props가 {} 빈 객체로만 출력이 된다.
원래는 route 컴포넌트를 통해 렌더링된 컴포넌트들은 match, location, history props를 기본적으로 가지고 있는 줄 알고 있었는데 예상 결과와 다르게 출력되는 현상을 마주하고 원인과 해결 방법을 찾아보게 되었다.

function App(props) {
    console.log("props:", props);
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/:id" element={<Detail />} />
            </Routes>
        </BrowserRouter>
    );
}

export default App;

2. v6로 올라오면서 Link와 관련된 개선점

예전에 react-router v5에서는 해당 기능을 사용했을 때는 정상 동작하였었고 또한 Link를 통해 페이지 이동을 하여 props를 찍어봤었기 때문에 바로 공식문서 내용 중 v6 업데이트로 인한 변경 사항 중 Link에 대한 변경 사항 위주로 확인을 해보았다.

확인해 봤을 때 Link와 관련된 개선점은 다음과 같았다.
관련된 내용은 아래의 Notion 링크로 대체한다 :)

v5에 대한 이해가 부족하여 v5의 문서에서 필요한 부분을 같이 읽으면서 정리한 내용을 요약해보면 아래 정도로 요약할 수 있었다.

v5에서 있던 상대 경로의 모호함을 개선하고 Link 경로 지정에 있어서 디렉토리 경로 시스템을 적용하였다.
v5에서 제공하는 link의 component props를 제거하였다.

이를 통해 문제는 Link에서 발생된 것이 아니였다는 것 을 알게 되었다.

3. Route Props(문제 해결)

위의 link에 대한 궁금증을 해결하고 나니 좀더 문제가 확실히 보였다.
해당 문제를 찾기위해서 match, location, history에 대한 정보가 어디에 있을지 찾아보니 답도 찾을 수 있었다.

각각의 속성들을 v6가 아닌 v5에서 검색을 해보니 Route props라는 개념을 알 수 있엇다.
Route component를 이용해 rendering을 하는데는 총 4가지 방법이 있다.

Route component를 이용하여 rendering하는 4가지 방법
1. children element
2. component prop
3. render prop
4. children prop

1번 방법을 제외한 3가지 방법은 hook이 도입되기 전에 이전에 작성된 코드들을 지원하기 위한 목적으로 만들어졌으며 이 방법들을 이용해서 rendering을 하게되면 rendering되는 컴포넌트에게 Route props들을 전달하게 되는데 이 route props가 우리가 찾지 못했던 match, location, history였다.!

React Router v6에서는 1번의 방법으로 컴포넌트가 rendring되도록 하고 있기 때문에 v6를 통해 렌더링되는 컴포넌트에서는 해당 props들을 확인할 수 없었던 것이었다!

route-render-methods in v5 :
https://v5.reactrouter.com/web/api/Route/route-render-methods

4. Why children element?

그렇다면 왜 react-router는 1번의 방법 즉 children element 방법을 통해 rendering을 수행하게 하는 것일까?

이는 공식문서에서 제공하는 다음 글들을 읽어보면 도움이될 것이다.
해당 글을 읽고 정리해본 노션 링크도 함께 남겨본다.

advantages-of-route-element in v6 : https://reactrouter.com/docs/en/v6/upgrading/v5#advantages-of-route-element
react-router v5.1 :
https://reacttraining.com/blog/react-router-v5-1/
react-router v5.1 정리 :
https://scratched-cephalopod-eb9.notion.site/about-React-Router-v5-1-5b7c757d01cf4e249203a2e6683f77fa

해당 글들을 요약하면 아래와 같다.

children prop, render prop, children prop을 이용할 경우 아래와 같은 문제가 발생한다.

children prop : custom prop을 전달할 수 없다.
render prop : custom prop을 전달할 수는 있지만 그 방식이 일반 컴포넌트의 방식을 따르고 있지는 않다.
3가지 방법 모두 : 루트나 계층이 많이 떨어진 사이가 먼 경우 route 관련 state를 얻기 위해선 props drilling 이슈가 발생할 수 밖에 없다.

이러한 문제를 해결하기 위해서

react-router는 children element를 통해 필요한 state, props만 전달 받도록하고
route 관련 state들은 react-router에서 제공하는 hooks를 통해 관련 state를 받아오도록 하고 있다.

5. 마무리

오늘의 교훈

공식 문서를 볼 때는 관련된 문서의 가장 첫 내용부터 차례로 읽는 습관을 들이자!
문맥을 파악할 수 있어 말하고자 하는 바나 각각문단에 쓰이는 용어들을 설명하는 글을 만날 수 있을 것이다.

느낀점

해당 문제를 겪고 공부하면서 자료를 찾아보니 react-router를 왜 쓰는 것인지 근본적인 개념에 대해 공부할 수 있었고 공식 문서를 읽는 순서가 공부 효율에 많은 영향을 미쳤다고 생각이들었다.
관련 업데이트 사항에 대해 공부하면서 왜 react-router가 hooks를 선택하였고 이를 통해 어떤 개선을 이루어냈는지에 대해 글을 읽으면서 구현 방법 보다는 react-router에 필요성을 이해하게 되어 유익한 시간이었다.

hooks를 채택한 React Router v5.1 URL : https://reacttraining.com/blog/react-router-v5-1/#meet-react-router-51

경험이 기록으로

언제나 작성한 코드에 대해 이유를 말할 수 있도록