📌 핵심 요약
- HOC: 컴포넌트를 인자로 받아 새로운 기능을 추가한 컴포넌트를 반환하는 패턴입니다. (로직의 재사용 및 렌더링 결과에 관여)
- Custom Hook: 함수형 컴포넌트 내에서 상태 관리 로직을 추상화하여 공유하는 방식입니다. (로직의 재사용에 집중하며 렌더링 구조에 영향을 주지 않음)
💬 실제 면접 답변 예시 "HOC와 커스텀 훅 모두 로직 재사용을 위한 수단이지만, 적용 방식에 차이가 있습니다. HOC는 주로 '기능의 주입'보다는 '컴포넌트의 감싸기'를 통해 인증 여부나 공통 레이아웃을 적용할 때 유리하며, 클래스형 컴포넌트 시절부터 널리 쓰였습니다. 반면, 커스텀 훅은 함수형 컴포넌트와 함께 도입되어 '상태 로직의 공유'를 훨씬 간결하게 만들어줍니다. HOC의 고질적인 문제였던 Wrapper Hell(깊은 중첩)과 Props 추적의 어려움을 커스텀 훅이 해결했기 때문에, 최근 대부분의 로직 공유는 커스텀 훅으로 처리하고, 페이지 권한 체크처럼 컴포넌트 전체를 제어해야 할 때만 제한적으로 HOC를 사용하고 있습니다."
💡 실무 팁 & 주의점
- Tip: 대기업 실무에서는 withRouter, withAuth 같은 네이밍 컨벤션을 가진 HOC를 통해 전역적인 부가 기능을 관리하는 경우가 많습니다.
- 주의점: HOC 내에서 원본 컴포넌트의 Props를 변경하거나 생략하면 디버깅이 매우 어려워지므로, 항상 원본 Props를 그대로 전달(Spread)해야 합니다.