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));
'Front-end > React' 카테고리의 다른 글
React Modal (0) | 2017.11.12 |
---|---|
React 앱을 개발하기 위한 기본 개발 환경 (0) | 2017.11.12 |
React 동적 컴포넌트 호출하기 : dynamic component import (0) | 2016.11.29 |
React Tutorial #4 Guest Book Redux : 리액트 리듀스 방명록 프로그램 (0) | 2016.05.16 |