고차 컴포넌트(HOC)는 어떤 패턴인가요?

이렇게 답해 보세요 (핵심 답변)

고차 컴포넌트(HOC)는 컴포넌트를 인자로 받아 권한 확인, 로깅, 공통 props 주입 같은 횡단 관심사 로직을 덧붙인 새 컴포넌트를 반환하는 패턴입니다. 클래스 컴포넌트 시절에는 로직 재사용을 위해 널리 쓰였지만, 여러 HOC를 중첩하면 래퍼 지옥이 생기고 어떤 HOC가 어떤 props를 주입했는지 추적하거나 ref를 전달하기가 까다로워집니다. 따라서 현대 함수 컴포넌트 환경에서는 대부분 custom Hook이나 children 조합으로 대체하며, 기존 레거시 코드를 유지보수하거나 컴포넌트 외부 경계를 감쌀 때 주로 마주하게 됩니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. 원본 컴포넌트를 직접 수정하지 않고 감싸는(Composition) 방식으로 공통 동작을 재사용할 수 있습니다.
2. 래퍼 컴포넌트가 무관한 props나 ref를 누락하지 않고 하위 컴포넌트에 잘 전달하도록 계약을 신경 써야 합니다.

면접에서 자주 하는 실수

컴포넌트의 render 함수 내부에서 매번 HOC를 호출해 새 컴포넌트를 만들면 렌더마다 컴포넌트 타입 참조가 바뀌어 하위 트리의 상태와 DOM이 매번 초기화됩니다.