[250624] TIL

Today I Learned (2025-06-24)

Container/Presentational 패턴

분리를 강제하는 방법은 컨테이너, 프리젠테이셔널 패턴이 있음

Presentational Components

• 데이터가 사용자에게 어떻게 보여질 지에 대해서만 다루는 컴포넌트
• props를 통해 데이터를 받음

Container Components

• 어떤 데이터가 보여질 지에 대해 다루는 컴포넌트
• 스타일 시트도 포함하지 않는다.

Hooks

• React Hooks로 대체 가능하다. React 에 Hooks가 추가되면서 Container 컴포넌트 없이도 stateless 컴포넌트를 쉽게 만들 수 있게 되었다.

장점

Container/Presentational 패턴은 여러 장점들을 가지고 있다.

해당 패턴을 활용하면 자연스럽게 관심사의 분리를 구현하게 된다. Presentational 컴포넌트는 UI를 담당하는 순수함수로 작성하게 되는 반면 Container 컴포넌트는 상태와 기타 데이터를 책임지게 된다.

Presentational 컴포넌트는 데이터 변경 없이 화면에 출력할 수 있으므로 앱의 여러 곳에서 다양한 목적으로 재사용할 수 있다.

Presentational 컴포넌트는 앱의 비즈니스 로직을 수정하지 않으므로 코드베이스에 대한 이해가 깊지 않은 개발자더라도 쉽게 수정이 가능하다. 공통으로 쓰이는 Presentational 컴포넌트가 디자인의 요구사항에 따라 수정하면 앱 전체에서 반영된다.

Presentational 컴포넌트는 테스트하기도 쉽다. 일반적으로 순수함수로 구현되므로 전체 목 데이터 스토어를 만들 필요 없이 요구하는 데이터만 인자로 넘겨주면 된다.

---

단점

Container/Presentational 패턴은 비즈니스 로직과 렌더링 로직을 쉽게 분리할 수 있지만 훅을 활용하면 클래스형 컴포넌트를 사용하지 않고도, 또 이 패턴을 따르지 않아도 같은 효과를 볼 수 있다. 참고로 지금은 상태를 가진 컴포넌트도 함수형으로 만들 수 있다.

훅을 사용하더라도 이 패턴을 사용할 수는 있지만 너무 작은 규모의 앱에서는 오버엔지니어링 일 수 있다.

---

클래스를 쓰지 않고 Hooks 를 쓰더라도 컨테이너/프리젠테이셔널 패턴을 사용했다고도 볼 수 있을까 ?

• 그렇다. 해당 패턴이 전달하고자 하는 핵심 가치는 관심사 분리라고 생각한다. Hooks가 컨테이너 역할을 하고 프리젠테이셔널 컴포넌트 역할이 구분되어 있다면 패턴에 부합한다고 본다.