[리액트] 디자인 패턴 장/단점 정리

container/presenter

장점

관심사의 분리를 더 잘할 수 있다.

이 패턴 방식으로 Component 를 작성하면 작업을 하는 앱 과 UI 를 보다 이해하기 쉽게 만들 수 있습니다.

재 사용성을 높일 수 있다.

완전히 다른 곳으로부터 온 여러 상태(state) 라 할지라도, 이를 표현하기 위해 같은 Presentational Component 사용할 수 있는데 이때, 각 상태를 나타내는 Container Component 를 만들어 이를 또 재사용 할 수 있습니다.

Markup 작업이 편하다.

이 패턴을 제대로 적용하려면 Layout Component 를 별도로 추출하여 관리해야 하는데, 이렇게 Layout Component 를 추출하게 되면 똑같은 Layout 마크업을 여러 Container Component 에 작성하는 작업을 피할 수 있습니다.

단점

파일의 갯수 증가 (Container 컴포넌트를 분리했을 시)

React-Redux 초보자가 바로바로 배우기 힘든 극악의 난이도

불필요한 depth 추가 (connect()가 HOC 패턴으로 구현되어 있음.)

props를 단번에 파악하기 어려움.

Atomic

장점

재사용 가능한 설계 시스템을 제공

재사용의 효율을 높임

디자인을 쉽게 수정할 수 있습니다.

레이아웃을 이해하기 쉬어집니다.

페이지를 처음부터 설계하는 시도가 있어, 페이지의 레이아웃의 이해가 오래감

단점

오랜 기간의 디자인 설계
depth가 깊은 폴더구조