container와 presenter는 리액트의 코드 디자인 패턴이다. 2015년에 개발자 Dan Abramov가 처음 소개했으며, 현재는 리액트의 고전 디자인 패턴이라 해도 무방하다. 싱글페이지, 구조관련과 기능을 한페이지에서 작성할 수 있는 jsx가 반영된 게 리액트의 장점임을 우리는 알고 있다. 다만, 프로젝트가 커지다보면 한 파일 내에 모든 코드가 다 있다보니 편해서 사용했지만, 어느순간 불편함을 초래한다. 이를 해결하고자 나온게 코드 디자인 패턴들이다. Container-Presenter는 그 패턴 중 하나다.
구조
Container-Presenter 디자인 구조는 기본 개념은 간단하다. 기능 부분과 보여주는 부분을 단순하게 분리하는 것. 페이지 함수에서 여러 기능이 포함되고 리턴에서 화면을 그리고 있을 텐데, 리턴에서 화면을 그리는 것에 해당하는 부분을 따로 파일을 만들어 컴포넌트화 시킨다. 기존 기능이 남아 있는 건 Container, 화면을 그리는 건 Presenter다.
한 파일에서 리턴을 새로 파일을 만든 후 기존 파일을 container로 명명하고 return에 새로 만든 presenter파일을 import했다. 이로 인해 80줄이 50줄, 30줄로 나뉘어 코드 보기가 훨씬 더 간편해졌다. 페이지가 더 복잡하다면 더욱 이득인 상태다.
Dan Abramov 曰 "I don’t suggest splitting your components like this anymore"
이게 무슨 소리인가 싶었다. 괜찮다고 소개한 사람이 더이상 이렇게 컴포넌트 나누기를 추천하지 않는단다. 그 이유를 천천히 읽어보니 이해된다. Container-Presenter 패턴은 다른 패턴에 비해 간단한 편이다. 그러다보니 굳이 나누지 않아도 되는데, 나누느라 엉뚱한 시간을 쓰고, 오히려 보기 어려워지고, 코딩하기 복잡해지는 경우를 보았다는 거다. 리액트를 사용하면서 자연스럽게 Container-Presenter 패턴을 사용했다면 추천하지만, 무작정 Container-Presenter 패턴으로 나누는 것을 추천하지 않는다는 거다. 더불어 이 패턴은 리액트에 hook이 나오기 전에 쓰였던 패턴이므로, 무조건 반영은 지양되어야 한다.
Paul Hayes 마인드셋
개발자 Paul Hayes이 제안한 마인드셋이 Container-Presenter를 사용할 때 유연해보여 여기에도 정리해둔다.
Presenter
- HTML, CSS 및 기타 프리젠터가 가진 구성 요소만 사용.
- 다른 응용프로그램으로 대체할 수 있다면 지양.
- 스테이트를 사용할 경우 자기 자신 한정 사용.
- 스타일 관련 제외하고 hook 사용하지 않기.
- 다른 부모컴포넌트로 덮지 않기(redux를 사용한다해도 container에 포함시키기).
- 레고 블럭 같이 가능하다면 작게 만들기.
- isDisabled나 isColoredBackground 같이 시각적 특성을 변경하는 props는 가능.
- style을 위한 다른 stylesheet들도 가능.
Container
- HTML과 스타일링 요소는 절대 포함하지 않기. 차트나 그리드 등 라이브러리에 매우 특정한 스타일 방식일 경우에만 예외
- 프리젠터나 기타 콘테이너 요소를 가져와서 사용.
- 로직 파일은 hook 파일로(여기선 react-testing-library보다 react-hooks-testing-library를 테스트하는 게 주 목적).
- props 가능
- context, 사이드 이펙트, DB에서 요구하는 CRUD 사용 가능
- CRUD가 잘 될 것으로 예상하고 바로 업데이트, 서버 응답이 오류나 UI를 바꿔야 할 때만 롤백.
- Always declare the test ids in the container components and pass the test id’s to the components
마무리
아무렇게나 분리하지 말라고 권고한 Dan Abramov의 말에 굉장히 동의한다. Container-Presenter 방식을 많이 쓴다고 배웠으나, 나누지 않을 때가 훨씬 좋은 경우도 분명히 있다. 개인적으로 코드가 120줄이 넘어갈 경우에만 컴포넌트를 나누고 있다. 코드도 짧은데 억지로 나누는건 코딩할 때나 유지보수할 때 모두 시간 낭비인 듯하다.
디자인 패턴을 검색하면서 여러 패턴을 봤다. 흥미로운 패턴도 있고, 아직 이해되지 못하는 개념로 인해 뭔가 어려운 듯한 패턴도 많았다. 정복하고 싶은 욕구가 드는 것을 보니 조만간 한 번 더 정리하지 않을까 싶다.
※ 잘못된 내용이 있을 경우 댓글로 알려주세요. 배우고 익히고 수정하겠습니다:)
'FE > React' 카테고리의 다른 글
| useRef (0) | 2022.09.29 |
|---|---|
| state Lifting (0) | 2022.09.26 |
| static routing & dynamic routing (0) | 2022.09.19 |
| React state, prev & props, children (0) | 2022.09.17 |
| Conditional-rendering (0) | 2022.09.12 |
