React Router 경로가 변경되어도 React Redux connect 에 속한 render 는 호출되지 않는 다.

React Router 경로가 변경되어도 React Redux connect 에 속한 render 는 호출되지 않는 다.

한동안 이 문제로 혼돈에 빠져있었다. 경우에 따라 내가 생각한 결과가 달랐기 때문이다. 1 + 1 은 2 인데 경우에 따라 (즉 데이터 형식) 11도 될 수 있는 경우와 비슷하다고 할 수 있다.

난 내가 뭔가를 잘 못 코딩하였거나 내가 제대로 router 를 이해하지 못해서 발생한 문제라고 생각했는 데... 여러 테스트를 거쳐 확인된 결과는 react-redux 의 connect 에 의해 render 가 최초 한번만 호출되고 그 후 props 가 변경되더라도 redner 되지 않았다.

부모의 props 가 변경되는 자식의 컴포넌트는 모두 렌더링되는 게 react 의 기본적인 라이프사이클이다. (16버전부터 리액트가 렌더링 결정을 판단한다.)

관련 소스

const TestOne = props => <div>test one</div>;

--- skip ---

const TestTwo = props => <div>test two</div>;

export default connect(..., ...)(TestTwo);

--- skip ---

<Router ...>
    <Link ... to="/">TestOne</Link>
    <Link ... to="/two">TestTwo</Link>
    
    <div>
        <Route exact path="/" component={TestOne} />
        <Route path="/two" component={TestTwo} />
    </div>
</Router>

/ 경로를 반복해서 클릭하면 test one 은 항상 render 를 한다. 하지만 /two 경로를 반복해서 클릭하면 render 를 하지 않는 다.

TestTwo 를 페이지가 처음 로딩될때 한번 호출될 뿐이다.

그래서 react-redux 의 처리 과정에 대한 이슈인 것 같아 검색하니 역시나 구글링은 답을 주었다.

[참고] https://github.com/ReactTraining/react-router/issues/4671

난 이문제로 몇일동안 맨붕에 좌절과 집중력도 최악이였는 데... 아... 제기랄;;

React Router 에 withRouter 라는 것을 이용하면 해결할 수 있다. 이 기능은 router pathname 이 변경될때마다 호출될 수 있게 해주는 인터셉터같은 역활을 한다.

난 이 기능을 알고 있었지만 라이브러리가 다른 react-redux 에 react-router withRouter 를 의존해야한다라는 건 전혀 생각할 수 없었다.

export default withRouter(connect(..., ...)(Component));

Syaku Blog by Seok Kyun. Choi. 최석균.