리액트 애플리케이션을 구축할 때 재사용 가능한 로직이나 행위를 컴포넌트 간에 공유해야 하는 경우가 빈번하게 발생합니다. 이러한 문제를 해결하기 위한 패턴 중 하나가 바로 고차 컴포넌트 (Higher-Order Component, HOC) 입니다. 이를 이해하기 위해서는 먼저 자바스크립트의 고차 함수 개념을 명확히 구분해야 합니다.
고차 함수와 고차 컴포넌트의 차이
고차 함수란 다른 함수를 인자로 받거나 결과를 반환하는 함수를 의미합니다. 자바스크립트 표준 라이브러리에 포함된 filter, map, reduce 메서드들이 대표적인 사례입니다. 이에 반해 리액트의 고차 컴포넌트는 다음과 같은 두 가지 핵심 조건을 만족해야 합니다.
- 본질적으로 컴포넌트가 아니라 컴포넌트를 인수로 받는 함수여야 합니다.
- 실행 시점에 새로운 컴포넌트를 생성하여 반환해야 합니다.
즉, 기존 컴포넌트에 부가적인 기능을 덧붙이고 그 결과물을 다시 새로운 컴포넌트 객체로 제공하는 팩토리 역할을 수행한다고 볼 수 있습니다.
개발 도구를 위한 이름 지정 (displayName)
고차 컴포넌트로 감싸진 경우 디버깅 과정에서 실제 컴포넌트 이름이 잘리지 않고 올바르게 표시되어야 합니다. ES6 클래스 표현식에서는 명시적인 이름을 붙이지 않을 수 있으므로, 반드시 displayName 속성을 통해 식별자를 부여해야 개발자 도구가 정확하게 렌더링됩니다.
function createWrapper(Component) {
class Enhanced extends React.PureComponent {
render() {
return <Component {...this.props} />;
}
}
// 디버그 친화적인 이름 설정
Enhanced.displayName = `WithFeature(${Component.displayName || Component.name})`;
return Enhanced;
}주요 활용 시나리오
고차 컴포넌트는 단순히 코드를 줄이기 위함이 아닙니다. 비즈니스 로직의 분리나 보안 계층 구현 등 구체적인 목적을 위해 사용됩니다. 다음 두 가지 사례를 통해 실제 구조를 살펴봅니다.
1. 공통 속성 주입 (Prop Injection)
여러 하위 컴포넌트에서 공통적으로 사용되는 데이터 (예: 지역 정보, 테마 설정, 로케일 등) 를 반복해서 전달하는 대신, 고차 컴포넌트 내부에서 자동적으로 병합시킬 수 있습니다.
// 기본 기능 추가용 헬퍼 함수 정의
function injectCommonData(WrappedComponent) {
return (props) => {
return (
<WrappedComponent
{...props}
globalSetting={{ lang: "ko", region: "SEA" }}
/>
);
};
}
// 실제 뷰 컴포넌트들 (공통 데이터를 직접 받지 않음)
const Dashboard = (props) => <div>{props.user}
{props.globalSetting.lang}User Info | Region: {props.globalSetting.region}2. 인증 및 권한 관리 (Authentication Guard)
특정 페이지로의 접근을 제한하거나, 로그인이 필요한 컴포넌트를 보호하는 레이어 역할을 할 수 있습니다. 이는 각 컴포넌트 내부에 인증 로직을 분산하는 것을 방지합니다.
// 인증 상태를 체크하는 래퍼 컴포넌트
function withAuthRequirement(TargetComponent) {
return (props) => {
const isAuthenticated = props.userData?.token !== undefined;
if (!isAuthenticated) {
return <div style={{ color: 'red' }}>접근 거절: 로그인 필요</div>;
}
return <TargetComponent {...props} />;
};
}
// 보호받아야 할 메인 화면
function MainContent({ userId }) {
return <section>관리자 대시보드 (User: {userId})</section>;
}
// HOC 적용
const ProtectedMain = withAuthRequirement(MainContent);
export default function Root() {
const mockSession = { token: null }; // 토큰 없음
return (
<>
{/* 인증 실패 시 대체 UI 노출 */}
<ProtectedMain userData={mockSession} userId="99" />
{/* 인증 성공 시 (실제 환경에서는 true 또는 유효한 토큰이 들어감) */}
{/* <ProtectedMain userData={{token: 'valid'}} userId="99" /> */}
</>
);
}이를 통해 컴포넌트의 순수 비즈니스 로직은 유지하면서 외부 의존성이나 보안 로직을 효과적으로 제어할 수 있습니다. 적절한 사용 시나리오를 선택한다면 코드 중복을 획기적으로 줄이는 동시에 유지보수성을 높일 수 있는 강력한 패턴이 됩니다.