React 컴포넌트와 추상화

카카오엔터테인먼트 FE팀이 React 컴포넌트를 어떻게 더 잘 추상화할 수 있는지를 범용 컴포넌트와 비즈니스 컴포넌트로 나눠 설명한다. SRP(단일 책임 원칙)를 기반으로 도메인 의존성을 낮추고 합성 패턴을 활용하는 방식이 핵심이다.

핵심 포인트

상세 정리

컴포넌트 정의: 사용자 인터랙션과 비즈니스 로직, 시각적 표현을 적절한 단위로 나눈 것. TextInput 예시로 재사용 가능한 선언적 추상화를 보여준다.
책임 원칙(SRP): 프런트엔드에서 책임은 컴포넌트가 수행하는 행동이며, 책임이 명확할수록 응집도 높고 결합도 낮은 코드가 된다.
도메인 종속 함정: TextInput에 특정 도메인용 type prop 분기를 추가하면 변경에 취약해진다. Header 컴포넌트에 특정 URL 체크 코드가 들어가는 것도 같은 문제다.
ListItem 추상화: SongItem·ArtistItem처럼 유사한 도메인 컴포넌트를 범용 ListItem으로 통합해 name/className/thumbnail만 주입받으면 도메인 의존성이 사라진다.
합성 패턴: CardItem 하나에 rounded·lineCnt 등 prop을 계속 추가하는 대신 Card.Thumbnail·Card.Text·Card.Body 같은 하위 컴포넌트로 쪼개 조합하면 책임이 분산된다.
비즈니스 컴포넌트: 서버 통신·도메인 데이터 처리를 담당. 시각 표현은 범용 컴포넌트에 위임해 로직과 UI 책임을 분리한다.
핵심 판단 기준: 컴포넌트가 수행하는 책임이 하나인가, 도메인 의존성이 없는가를 기준으로 추상화 수준을 결정한다.

왜 읽나React 컴포넌트 설계 경험이 있는 프런트엔드 개발자가 SRP와 합성 패턴을 실제 코드 예시로 어떻게 적용하는지 확인하고 싶을 때 유용하다.

카카오 엔터테인먼트 FE 블로그

원문은 여기서 이어서 읽을 수 있어요

읽음 (0)

이 글과 비슷한