TUTORIAL

Render Props와 HOC

React 컴포넌트 재사용 패턴

럿지 AI 팀
2025-01-15
15분
컴포넌트 재사용 패턴

Render Props

<Mouse render={({x, y}) => ...}/>

함수를 prop으로 전달하여 렌더링 로직 공유

HOC (Higher Order Component)

withAuth(Component)

컴포넌트를 감싸서 기능 추가

패턴 비교

Render Props

장점: 유연성 높음
단점: 콜백 중첩
사용: 마우스/스크롤 추적

HOC

장점: 재사용성 우수
단점: props 충돌
사용: 인증/권한 처리

Custom Hooks

장점: 로직 분리
단점: React 전용
사용: 현대 표준 패턴

HOC 활용 예시

🔐withAuth

인증 상태 확인

⏳withLoading

로딩 스피너 표시

🛡️withErrorBoundary

에러 핸들링

🎨withTheme

테마 주입

🧭withRouter

라우터 props 전달

🔗connect

Redux 연결

현대 React 권장사항

React 16.8+ 에서는 Custom Hooks 패턴이 권장됩니다.
기존 HOC/Render Props 코드가 있다면 점진적으로 마이그레이션하세요.

관련 태그

#render
#Tutorial
#Frontend
#Development