React Component Cycle & Redux Data Flow

7주간의 프로젝트를 진행하며 그간 공부해온 React Hook과 React-Redux Toolkit을 활용해보았다.

비교적 짧은 시간동안 (약 4주의 개발 시간, 이외는 기획 및 발표 준비) 만족스러운 결과물이 나온 만큼, 이후에도 리펙토링과 버그 픽스를 통해 보다 견고하고 완벽한 프로젝트 산출물을 낳고 싶다는 조와 개인적인 욕심이 생기기도 하였다.

이에 프로젝트를 진행하는 동안 생겼던 주 버그들은 React Hook과 React-Redux Toolkit의 비동기 통신과 랜더링 시점 사이에서 많이 일어났는데, 예를 들어 페이지가 뒤로가거나 앞으로 돌아올 때, 적절한 state과 useEffect 그리고 useSelector의 활용이 되지 않아 특정 함수나 변수를 제대로 불러오지 못한다거나 (주로 Kakao Map API 관련해서 생성한 객체를 불러올 때 문제가 발생했다), 혹은 JSX에 반영된 변수들이 리랜더링 시에 undefined로 불려와지는 현상들이 발생했다.

몸으로 부딫히며 깨닫는 것을 매우? 좋아하는 필자이지만, 그만큼 더욱 React Component Cycle과 Redux의 Data Flow에 대해 중요성을 느껴 정리하고자 한다.

서론이 긴만큼, 다음 글들은 각각의 사이클과 그리고 랜더링 시점, 비동기 통신을 잘 활용하는 방법에 대해 공부하고 적어볼 예정이다.