강연자는 Slack 컴포저와 같은 복잡한 UI를 예시로 들어 Boolean Prop 기반의 개발 방식이 어떻게 코드의 난잡함을 초래하는지 설명합니다. 채널, DM, 스레드, 메시지 편집 및 전달 등 다양한 사용 사례를 하나의 컴포넌트에서 Boolean Prop으로 분기 처리할 경우, 수많은 조건문과 Props가 발생하여 코드가 이해하기 어렵고 버그 발생 가능성이 높아집니다.이러한 문제를 해결하기 위해 다음과 같은 컴포지션 접근 방식을 제안합니다.
1. 모놀리식 컴포넌트 분할
-
Boolean Prop 제거:
isEditingMessage와 같은 Boolean Prop 대신, 각 기능(예:DropZone,FooterActions)을 독립적인 컴포넌트로 분리합니다. 특정 기능이 필요 없으면 해당 컴포넌트를 렌더링하지 않음으로써 조건문을 제거합니다. -
JSX 활용: 조건부 렌더링을 위해 복잡한 Props 배열 대신 JSX를 직접 사용하여 각 액션 버튼(
PlusMenu,Emojis,TextFormat)을 명시적으로 선언합니다. 이는 코드의 의도를 명확히 하고 가독성을 높입니다. -
재사용 가능한 컴포넌트 묶음: 자주 사용되는 액션 그룹(예:
CommonActions)은 여러 개별 컴포넌트를 묶어 재사용 가능한 형태로 만듭니다. 필요시 언제든 개별 컴포넌트로 분리하여 유연하게 커스터마이징할 수 있습니다.
2. Context API를 통한 상태 관리 및 로직 분리
-
ComposerProvider도입: 컴포저의 공통 인터페이스(상태, 액션)를 정의하는ComposerProvider를 도입하여, 내부 컴포넌트들이 이 Context를 통해 상태에 접근하고 액션을 호출하도록 합니다. -
상태 관리 구현의 유연성:
ComposerProvider는 상태 관리의 인터페이스만 정의하고, 구현은 Provider를 렌더링하는 상위 컴포넌트에서 담당합니다. 예를 들어, 임시 상태에는useState를, 전역 동기화 상태에는useGlobalChannel과 같은 커스텀 훅을 사용할 수 있습니다. 이를 통해 동일한 UI 컴포넌트라도 사용되는 맥락에 따라 다른 상태 관리 로직을 적용할 수 있습니다. -
상태 리프팅(Lifting State): 컴포저 UI 외부에 있는 버튼(예: 메시지 전달 모달의 ‘전달’ 버튼)이 컴포저의 상태와 액션에 접근해야 할 경우,
ComposerProvider를 컴포저 UI보다 높은 트리 레벨로 이동시켜 해당 버튼이 Context에 접근할 수 있도록 합니다. 이는useEffects나render props와 같은 복잡한 패턴 없이 간결하게 상태 공유를 가능하게 합니다.
이러한 컴포지션 기반 접근 방식은 React 컴포넌트의 복잡성을 줄이고, 유연한 확장성을 제공하며, AI 기반 코드 생성 환경에서도 더 적은 버그와 높은 생산성을 기대할 수 있게 합니다.