고차 컴포넌트(HOC) 패턴
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. 고차 컴포넌트(HOC)에 대한 올바른 설명은?
💡 HOC는 컴포넌트를 입력받아 기능이 추가된 새로운 컴포넌트를 반환하는 함수입니다. JavaScript의 함수 특성을 활용한 패턴이며 React의 특별한 API가 아닙니다.
Q2. HOC 함수명의 일반적인 네이밍 컨벤션은?
💡 HOC는 관례적으로 with로 시작하는 이름을 사용합니다 (withAuth, withLoading, withLogger 등). use는 커스텀 훅의 네이밍 규칙입니다.
Q3. HOC를 사용할 때 반드시 피해야 할 패턴은?
💡 render 메서드 안에서 HOC를 호출하면 매 렌더링마다 새 컴포넌트 정의가 생성됩니다. React는 이를 다른 컴포넌트로 인식하여 기존 DOM을 버리고 새로 마운트하므로 심각한 성능 문제가 발생합니다.
Q4. HOC에서 WrappedComponent로 props를 전달할 때 권장하는 방법은?
💡 HOC는 자신이 관심 없는 props를 투명하게 전달해야 합니다. {...rest}로 전달하여 WrappedComponent가 필요한 모든 props를 받을 수 있게 합니다.
Q5. 현대 React에서 HOC보다 커스텀 훅이 선호되는 이유는?
💡 커스텀 훅은 컴포넌트 계층을 추가하지 않아 DevTools에서 더 깔끔하고 코드도 간결합니다. HOC의 "Wrapper Hell" 문제를 훅으로 해결할 수 있습니다. 단, 클래스 컴포넌트 레거시 코드에서는 HOC가 여전히 필요합니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.