대략적인 개요는 다음과 같다. 파란색 테두리 친 부분은 자식 컴포넌트이며 부모 컴포넌트인 프로필 페이지로부터 props로 데이터를 전달받는데 팔로우,언팔로우 버튼만 눌러 state값이 변하면 전체 페이지가 렌더링 되는 문제점이 있었다. 이는 불필요한 렌더링이 일어나는 것 같아 저 파란색 테두리로 표시한 컴포넌트만 렌더링이 되게 범위를 축소시키고 싶었다.
때문에 Redux-toolkit,Redux-thunk을 배워 부모 컴포넌트로부터 데이터를 전달받지 않고 필요한 그 자리에서 서버로부터 데이터를 끌고오고 필요시 그 자리에서 데이터를 수정하려고 하였다. 데이터를 가져오는 것까지 성공하였지만 팔로우, 언팔로우 버튼을 눌렀을때 팔로워 수와 팔로잉 수가 바로바로 반영이 되지 않는 문제점이 생겼다. 이것은 리덕스 툴킷 사용시 렌더링 조건, useEffect의 원리에 대해 정확하게 숙지하지 못한 것에서 일어났으며 다음에 같은 실수를 하지 않기 위해 정리차 쓴 글이다.
리액트 렌더링의 조건은 다음과 같다.
-
내부 상태값(state) 변경
-
부모가 전해준 속성(props) 변경
-
중앙 상태값(redux store 등) 변경
-
부모 컴포넌트가 재렌더링되는 경우, 자식 컴포넌트도 재렌더링.
팔로우,언팔로우 버튼을 눌렀을때 서버의 데이터는 수정된다. 하지만 처음에 Redux-thunk를 사용하여 가져온 데이터는 재렌더링이 되지 않아 화면에 그대로 보여주는 것이였다.
해결법
버튼 클릭시 store안에 있는 isfollow 값을 dispatch로 변경시켜주고 useEffect의 deps 배열 안에 redux-store의 isfollow 값을 주시하게 하여 변화시 서버의 데이터를 다시 가져와 팔로워 팔로우 수를 새로 업데이트 시켜준다.
