재사용 가능한 React 컴포넌트: 현실과 이론의 괴리

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

React 및 TypeScript로 작업하는 개발자, 특히 컴포넌트 재사용성에 어려움을 겪는 중간 이상 수준 개발자

핵심 요약

• props로 구성 유연성 확보 (예: closable 속성 추가 시 닫기 버튼 동작)
• useState로 내부 상태 관리 (예: useState 활용 시 렌더링 최적화)
• 커스텀 이벤트로 부모-자식 통신 (예: onClose 핸들러로 상태 동기화)
• TypeScript 타입 체크 강제 (런타임 오류 방지 및 코드 가독성 향상)

섹션별 세부 요약

1. 문제 인식: "재사용 가능한" 컴포넌트의 한계

• 기존 컴포넌트는 단일 케이스에 최적화되어 있어, alert 타입 추가 시 prop 복잡성 증가
• 스타일링 오류, 예기치 않은 사이드 이펙트 발생 (예: dismissible 기능 추가 시)
• 대부분의 컴포넌트는 "기능 수행"에 집중, "확장성" 고려 부족

2. 개선된 접근 방식: React + TypeScript

• props 기반 구성

- variant 속성으로 welcome, error, success 등 다양한 스타일 지원

- children 속성으로 내부 컨텐츠 유연하게 조정

• useState 내부 상태 관리

- useReducer 대신 useState 활용 시 간단한 상태 변경 처리

- closable: boolean 속성으로 닫기 버튼 조건 판단

• 커스텀 이벤트 통신

- onClose 핸들러로 부모 컴포넌트에 상태 변경 알림

- EventEmitter 대신 props 기반 콜백 패턴 사용

3. TypeScript의 역할: 안정성 확보

• TypeScript로 props 타입 정의 (예: interface AlertProps { variant: 'success' | 'error'; closable?: boolean; })
• strict 모드 활성화 시 undefined 처리 강제 (예: closable ?? false)
• React.FC 대신 function AlertComponent(props: AlertProps) 사용으로 명확한 타입 선언

결론

• TypeScript + React의 조합을 통해 props, state, event 3가지 원칙을 기반으로 확장 가능한 컴포넌트 설계
• variant/closable 등 유연한 속성 정의와 useState 활용으로 상태 관리 최적화
• onClose 핸들러를 통해 부모-자식 간 명시적 통신 구현 (예: handleClose = () => onClose(true) 호출)