리액트(React) 컴포넌트, 어떻게 추상화할까? 정책과 메커니즘 분리 전략!
Render Props 패턴을 통해 컴포넌트의 재사용성(Reusability)을 높이는 방법 제시
정책과 메커니즘 분리(Separation of Mechanism and Policy) 원칙을 바탕으로 UI 로직과 비즈니스 로직을 분리하는 방법론 소개
커스텀 훅(Custom Hook)과 컴포넌트 기반 추상화의 차이점을 분석하고, 상황에 맞는 추상화 전략 제시
컨테이너(Container) 컴포넌트와 콘텐츠(Content) 컴포넌트의 역할 분담을 통해 컴포넌트 설계 원칙 제시
변경 빈도(Change Frequency)에 따른 정책의 층위 구분을 통해 유연한 UI 아키텍처 구축 방안 제시
정책과 메커니즘 분리(Separation of Mechanism and Policy)의 핵심
본문에서는 정책과 메커니즘 분리(Separation of Mechanism and Policy) 원칙을 리액트(React) 컴포넌트 설계에 적용하는 방법을 제시한다. 위키피디아(Wikipedia) 정의에 따르면, 메커니즘은 시스템의 기능, 정책은 기능의 운용 규칙을 의미한다.
유연성(Flexibility) 확보: 정책 변경 시 메커니즘 수정 없이 대응 가능
확장성(Extensibility) 증대: 새로운 요구사항에 유연하게 대처 가능
관심사 분리(Separation of Concerns): UI 로직과 비즈니스 로직의 명확한 분리
리액트(React) 컴포넌트에서 UI 로직은 정책, 데이터 순회와 같은 기능은 메커니즘으로 볼 수 있다.
Render Props 패턴을 활용한 컴포넌트 재사용성 극대화
글에서는 Render Props 패턴을 활용하여 컴포넌트의 재사용성을 높이는 방법을 설명한다. Render Props 패턴은 컴포넌트의 렌더링 로직을 자식 컴포넌트에게 위임하여, 다양한 UI 표현을 가능하게 한다.
재사용성(Reusability) 증대: List 컴포넌트는 데이터 순회(Mechanism)에 집중, UI 렌더링(Policy)은 외부에서 주입
유연한 확장성(Extensibility): 새로운 UI 디자인 요구사항 발생 시, renderItem 함수만 변경
관심사 분리(Separation of Concerns): 데이터 흐름 제어와 UI 표현의 명확한 분리
이러한 접근 방식은 컴포넌트의 결합도(Coupling)를 낮추고 응집도(Cohesion)를 높이는 데 기여한다.
커스텀 훅(Custom Hook) vs 컴포넌트: 추상화 전략 비교
본문은 커스텀 훅(Custom Hook)과 컴포넌트 기반 추상화의 차이점을 분석하고, 각 방식의 장단점을 비교한다. 훅은 행동(Behavior)과 상태(State)를 추상화하고, 컴포넌트는 구조(Structure)와 렌더링(Rendering)을 추상화한다.
데이터 접근 방식: 훅은 컴포넌트 스코프에 데이터 병합, 컴포넌트는 렌더 프롭 내부에서 데이터 유효
렌더링 제어 범위: 훅은 부모 컴포넌트 전체 생명주기에 관여, 컴포넌트는 렌더링 영향 범위 국소화
결합도(Coupling)와 응집도(Cohesion): UI와 강하게 결합된 기능은 컴포넌트로 묶어 응집도 향상
결론적으로, UI와 밀접한 기능은 컴포넌트, 로직 재사용이 필요한 경우 훅을 활용하는 것이 효과적이다.
컨테이너(Container)와 콘텐츠(Content) 컴포넌트의 역할 분담
글에서는 컴포넌트를 컨테이너(Container)와 콘텐츠(Content)로 구분하여 설계하는 방법을 제시한다. 컨테이너는 흐름을 제어하고, 콘텐츠는 정보를 표현하는 역할을 담당한다.
컨테이너(Container) 컴포넌트: 렌더링 로직을 외부로 위임(Open), 재사용성 극대화
콘텐츠(Content) 컴포넌트: 렌더링 로직을 내부에서 캡슐화(Close), 디자인 일관성 유지
SavingList, SavingItem 컴포넌트 예시: SavingList는 컨테이너, SavingItem은 콘텐츠로 설계
이러한 설계는 컴포넌트의 책임(Responsibility)을 명확하게 분리하고, 유연한 UI 아키텍처를 구축하는 데 기여한다.
변경 빈도(Change Frequency)에 따른 정책의 층위 구분
본문은 정책과 메커니즘의 경계가 고정된 것이 아니라, 변경 빈도에 따라 유연하게 정의될 수 있음을 강조한다. 즉, 변경 빈도가 높은 정책은 외부로, 낮은 정책은 내부로 캡슐화하는 전략을 제시한다.
본사 지침(Slow Policy): 몇 년간 불변하는 레시피와 같은 정책
시즌 프로모션(Fast Policy): 상황에 따라 수시로 변경되는 마케팅 정책
디자인 시스템(Design System) 활용: 디자인 시스템은 UI를 찍어내는 메커니즘으로 작용
결론적으로, 변경 가능성을 예측하고, 그에 따라 컴포넌트를 설계하는 것이 유연한 UI 아키텍처 구축의 핵심이다.
