이 디자인 패턴을 정리하게 된 이유

Netflix를 html, css, js로 작성한 뒤, 리액트로 옮겨보는 작업을 하던 도중. Components를 어떻게, 어느 정도 수준까지 분리해야할까라는 고민이 생겼다. 그렇게 Design Patter 중 Presentational & Container Components라는 패턴을 보게 되었고. 예전에 '리액트를 다루는 기술'이라는 책에서도 본 기억이 있기에 적용해보기로 했다.

하지만 역시 이론과 실제는 달랐다. Component를 어느 단위까지 쪼개야 하는지, Container와 Presentational을 나누는 정확한 기준은 무엇인지 너무 막연했다. 아래는 내가 가진 의문점들이다.

1) 기능적인 부분의 범위는 어디까지인가?

2) Container와 Presentational이 같은 범위 안에 있어도 괜찮은가?

Presentational Components

1)html, css, presentational component만 사용 가능하다.
2)app에 대해 완전히 몰라야 한다. => 다른 app에서도 이 component를 사용할 수 있을지
스스로에게 물어보자.
3)presentational과 container 모두를 내부적으로 가질 수 있다.
4)작은 레고 블럭처럼 최대한 작게 만들어야 한다.
5)state를 가질 수 있지만 UI에 관련된 상태만 가질 수 있다.
6)가끔 완전히 다른 스타일을 불러오는 props를 받기도 한다.

Container Components

1)어떠한 동작을 할 것인가에 대해 책임진다.
2)절대로 DOM마크업 구조나 스타일을 가져서는 안된다.
3)presentational과 container 모두를 내부적으로 가질 수 있다.
4)주로 상태를 가지고 있다.
5)sideEffect를 만들 수 있다.
6)props를 자유롭게 받을 수 있다.

장점

1)재사용성
2)구조에 대한 이해가 쉽다.
3)마크업 작업이 편하다.

단점

1)파일 수가 많아진다.

Presentaional과 Container를 나누는 기준

Presentational은 stateless한 경향이 있고 Container는 stateful한 경향이 있으나, 절대적인 기준은 아니다.
따라서 해당 컴포넌트가 state를 가지고 있냐 없냐의 기능적인 부분보다는 어떤 목적을 가지고 있는지에 집중하는 것이 좋다

느낀점

디자인 패턴은 어디까지나 하나의 큰 틀이고, 융통성을 발휘해서 필요하다면 Presentational과 Container가 한 곳에 있을 수도 있다. 다만 UI요소를 Presentational에 넣어주는 것은 엄격하게 지킬 필요가 있는 것 같다.