Container Presentational 패턴의 도입

저희는 이번 프로젝트의 상태관리 라이브러리로 Redux를 도입하기로 결정한 뒤, Redux 공식 문서에 소개되어있는 Container/Presentational 패턴을 도입하기로 하였습니다.

이 패턴에서 Container는 presentational 컴포넌트들을 감싸고 있는 껍데기 컴포넌트로, 상태와 상태를 변경하는 로직을 품고 presentational 컴포넌트에 주입해주는 역할을 합니다. Presentational 컴포넌트는 말 그대로 props로 주입받은 상태들을 토대로 표현(렌더링) 해주는 역할을 합니다.

이 패턴을 통해 저희가 얻었던 이점은 다음과 같습니다.

첫번째로, 상태를 가지는 컴포넌트와 이를 받아서 렌더링만 해주는 컴포넌트의 역할을 구분해줌으로써 관심사의 분리를 통해 유지 보수를 용이하게 할 수 있었습니다. 특히 저희같은 경우는 중간에 대대적인 프로젝트의 UI 변경이 있었는데, UI 외적인 로직을 담당하는 container가 분리되어있어서 비교적 빠른 시간안에 변경을 이룰 수 있었습니다.

두번째로, 이렇게 container와 presentational을 구분함으로써 presentational 컴포넌트들을 쉽게 재사용할 수 있었고 개발시간을 단축할 수 있었습니다.

마지막으로, 지저분한 상태관리 로직들을 분리하다보니 UI 테스트를 쉽고 직관적으로 작성할 수 있었습니다.

하지만 저희가 느낀 단점도 있었는데, presentational 컴포넌트의 깊이가 깊어질수록 계속 최상위에 있는 container로부터 받은 props를 전달해주어야하는 점 때문에 컴포넌트가 받아야 하는 props가 많아져서 지저분해진다는 것과 로직이 복잡해지다보니 container가 점점 비대해진다는 것입니다.