리액트는 화면을 구성하기 위해 하나 이상의 컴포넌트를 조합한다.
그래서 항상 컴포넌트를 어떻게 나누고 관리 해야하는지 고민이다.
presentational and container component
제가 생각하는 두 컴포넌트는
presentational component
부모로부터 받은 props를 특정 스타일, 마크업에 따라 렌더링만 하는 컴포넌트.
container component
상태, 비동기 통신, 이벤트 로직 등 전반적인 로직을 컨트롤 하는 컴포넌트.
이다.
언제부터인가 정석으로 자리 잡은 컴포넌트 디자인 패턴이다.
당시에는 클래스형 컴포넌트만이 상태를 가질 수 있었기에 자연스럽게 생겨난 패턴인 것 같다.
이런 패턴의 장점으로는
- 관리가 용이하다.
- 뷰에 문제가 있으면 presentational component.
- 로직에 문제가 있으면 container component
- 독립 작업이 가능하다.
- props를 건들이지 않는 이상 presentational component 내부를 아무리 바꿔도 로직과 독립적이다.
- 퍼블리셔는 prestiontational component, 개발자는 container component를 동시 개발.
- 코드의 재사용
- prestiontational component는 props만 내려준다면 어디는 사용할 수 있다.
로 정리할 수 있겠다.
Hooks
하지만 현재는 Hook이 도입 되었고, 많은 개발자들이 클래스형 컴포넌트 보다는 훅을 사용한 펑션형 컴포넌트를 만들게 되었다.
그래서 지금 굳이 이런 패턴의 장점이 뚜렷하지 않아지며 고집할 필요는 없는 것 같다.
오히려 container component는 거의 종속된 로직을 가지고 있어 재사용과 거리가 멀어 진다.
로직을 커스텀 훅으로 분리하여 원하는 컴포넌트에 부착시키는 쪽이 더 효울적일 것 같다는 생각이 든다.
그냥 둘다 사용하자
굳이 특정 패턴을 사용할 필요는 없다. 장점들만 가져와서 사용하면 그게 좋은 것이 아닌가?
컴포넌트에 훅을 사용있는 상황에서 컴포넌트의 마크업만 필요하면 훅을 분리하고 컨테이너를 만들면 된다.
처음부터 많은 것을 나누고 설계하는 것도 좋지만, 그런 정적인 개발보다는 상황에 따라 유동적으로 나눌 수있게 개발하는게 중요한 것 같다.
중간중간 코드가 괴물이 되지 않게 지속적인 리팩토링을 하는 것도 잊지 말자.
