Presentational / Container pattern
프로젝트에 storybook 을 도입하기 전에, storybook 에 대해서 좀 더 공부해볼 필요가 있겠다는 생각이 들어서 여러 자료들을 살펴보고, 진겸님의 발표 - Say hello to storybook 도 보았다.
발표 당시가 2018년 이었는데, 강의에 소개되고 있는 Container Component pattern 에서는 이전에 테스트 관련 공부를 할 때 보았던 Presenter 라는 키워드도 있었다. (일단 여기서 1차 혼동)
발표 내용에서는 Presenter Component 라는 말을 하는데, 내가 알고있는 Presenter 는 MVP 패턴의 Presenter 라서, 어떤 로직을 제공하는 것이라고 생각을 했었는데 발표에서는 Pure 하고 Funtional 한 UI Component 로 설명되어 있었다.
조금은 혼동된 상태에서 발표의 인트로 부분을 어영부영 넘겼다.
찾아봤다. 일단 Presenter vs hooks 라는 키워드로 검색해보았다. ( React 에서 MVP 패턴을 사용하지 않는지? 에 대한 궁금함이 있었는데, 사실상 hook 이 presenter 로 사용되고 있다고 생각하는 사람이 있다는 것을 알고있었다. )
그런데 나오는 컨텐츠는 대부분 Presentational / Container Component pattern 과 Custom Hooks Pattern 에 대해 이야기하고 있었다.
여기서 깨달았다, 아 Presenter 라는 개념이 또 다른 의미로 사용되고 있는 게 있었구나.
Presentational / Container Component Pattern 은
리액트에서 데이터 로직을 다루는 Stateful 한 Container Component 와
Container 로 부터 state 를 props 로 전달받아 UI 로직을 다루는 Presenter Component 로 나누어 사용하는 패턴을 말한다.
Dan Abramov 은 2015 년에 Presentational / Container Component Pattern 에 대해서 소개했다.
해당 패턴을 유용하게 보았던 이유는 다른 관점의 컴포넌트로부터 복잡하고 stateful한 로직을 분리하게 해주었기 때문이다.
그런데 이 패턴을 소개한 Dan Abramov 은 2019 년 이후로 임의의 분리 없이 Hook 이 해당 일을 할 수있다고 생각하여 해당 패턴을 사용하는 것을 추천하지 않는다고 한다.
해당 글을 읽고서 다시 진겸님의 발표 영상을 보니, Presenter 에 대해서 더 와닿게 이해할 수 있었고, Storybook 의 실제 역할이 Presenter Component 를 복잡한 Container 의 실제 동작과 상관없이 다양한 Props 를 fake state 를 통해 테스팅할 수 있도록 도와주는 UI 테스팅툴 이라는 것으로 이해할 수 있었다.
이런 발표에서도 쓰인 Pattern 이었는데, Hook 과 함께 사용을 권장하지 않을 정도로 스탠스가 바뀌었다는 것은 Hook 이 사실상의 표준으로 인식이 되는데, 그렇다면 Hooks 내부의 로직을 사용하는 것이 당연하게 되고, 결국 MVP 에 해당하는 P(presenter) 를 직접 생성하여 로직을 수행하는 MVP 패턴은 다른이들에게 낯설 수 있겠다는 생각이 들었다. ( MV-Presenter 를 사용했던 코드 )
로직을 별도로 분리하여 사용한다는 점에서 Hooks 를 사용하는 것과 MVP Pattern 을 사용하는 것의 장단점을 생각해 보았다.
Hooks 를 사용할 때의 장점이자 단점
- 로직이 React 에 커플링된다. ( 다른 프레임워크에서 사용 불가. 단 React 에서 제공하는 여러 기능 사용 )
장점
- 사실상 표준으로 사용되는 패턴
- Presenter 에게 넘겨줘야할 Props 를 줄일 수 있다는 점
단점
- 테스트 시 hooks 마다 mock 을 해줘야 한다는 것
- 원하는 대로 동작을 하기 위해 고려할 것이 있다는 점( 함수내부에서 사용할 수 없다는 등.. )
별개로 한재엽님의 지속 가능한 컴포넌트 발표 를 보면서 궁금했던 Headless 관련 글을 읽었고, 컴포넌트를 설계할 때 스타일링을 담당하는 부분을 제외하고 상태와 관련된 부분만을 다루는 컴포넌트에 대해서 좀 더 알아보고 싶다는 생각을 했다.
참고
- https://yujonglee.com/socwithhooks.html
- https://tecoble.techcourse.co.kr/post/2021-04-26-presentational-and-container/
- https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
