react redux state 초기화

redux의 sate 초기화

redux를 사용하다보면 state가 초기화 되는 경우가 있다. react에서 버튼을 클릭시 다른페이지로 이동할 경우, a tag를 흔하게 사용한다.

 

state초기화 되는 이유

a태그를 사용하면 라우트를 이동시 redux의 전역 state가 모두 초기화 된다.

그 이유는 a 태그의 기본 속성은 페이지를 이동시키면서, 페이지를 새로 불러온다. 그렇게 되면서 react 앱이 지닌 상태도 초기화 되기 때문입니다.

 

초기화를 방지하는 방법

react에서 페이지를 이동시킬 때 react-router-dom 의 Link 컴포넌트를 사용하면 된다.

Link 컴포넌트는 브라우저 주소만 바꾸고, 페이지를 새로고침 하지 않기 때문에 react 앱의 state를 초기화 하지 않는다. 클릭을 이용해 이동할 때는 Link 컴포넌트를 사용하고, 함수내에서 페이지를 이동할 때는 useHistory안의 history 객체를 사용하면 된다.

** useHistory는 react-router-dom 의 v5에 새로 도입된 문법이다. 

 

결론

a태그 : 외부홈페이지로 이동할때만 사용하자

Link 태그 : 그 외 상황에서 사용하자