TIL - 20220524

 오늘은 코드숨 과제를 진행하며 Presentational Components와 Container Components라는 디자인 패턴에 대해 공부했다. 표와 함께 분류해보면 다음과 같다.

	Presentational Components	Container Components
목적	UI 관련	동작 관련 (데이터 패칭, 상태 업데이트)
리덕스를 알고 있는 지	모른다	알고 있다
데이터를 읽는 것	props로 부터 데이터를 읽는다	Redux state를 subscribe하면서 데이터를 읽는다.
데이터를 변경하는 것	prop을 콜백하면서 데이터를 변경한다.	Redux action을 dispatch하면서 데이터를 변경한다.

Redux를 사용함으로써 상태 관심사의 분리를 할 수 있으니 상태 관리는 Container Components에게 맡기고, UI는 Presentational Components에게 맡기는 것이다. 이렇게 나누면 UI의 변경 사항이 있으면 Container만 변경하면 되고, Presentational Component는 몰라도 상관없다. 반대로, Redux 상태의 변경 사항이 있으면 Presentational Components만 변경하고 Container Componets는 변경하지 않아도 되기 때문에 코드 보수에도 유리하고 확장성도 좋아진다. 이전에 Redux를 공부하면서 custom Hook을 이용하면 Presentaional과 Container Components를 분리하지 않아도 된다고 배웠는데, custom Hook을 능수능란하게 사용하기 전까지는 이렇게 나눠서 작성해야겠다.