HOC(고차 컴포넌트)가 무엇인가요?

HOC(고차 컴포넌트)의 개념

HOC(고차 컴포넌트, Higher-Order Component)는 React에서 컴포넌트 로직을 재사용하기 위해 사용되는 디자인 패턴입니다. HOC는 함수로 구현되며, 인자로 컴포넌트를 받아 새로운 컴포넌트를 반환하는 방식으로 동작합니다.

HOC는 기존 컴포넌트를 래핑하고, props를 조작하거나 새로운 props를 추가하여 컴포넌트를 확장하는 역할을 합니다. 이를 통해 여러 컴포넌트에서 공통적으로 사용되는 로직을 한 곳에 추상화하고, 코드의 재사용성과 가독성을 높일 수 있습니다.

HOC의 사용 예시

HOC의 예시를 살펴보겠습니다. 아래의 예시는 인증(Authentication) 기능을 구현한 HOC입니다:

function withAuth(WrappedComponent) {
  return function WithAuth(props) {
    if (props.isAuthenticated) {
      return <WrappedComponent {...props} />;
    } else {
      return <p>Please log in to access this component.</p>;
    }
  };
}

// 사용 예시
const Profile = (props) => {
  return <div>Welcome, {props.username}!</div>;
};

const AuthenticatedProfile = withAuth(Profile);

위의 예시에서 withAuth 함수는 WrappedComponent라는 인자로 컴포넌트를 받습니다. 그리고 인증 여부를 확인하여 인증된 경우에는 WrappedComponent를 반환하고, 인증되지 않은 경우에는 로그인 메시지를 표시하는 컴포넌트를 반환합니다.

withAuth(Profile)은 Profile 컴포넌트를 래핑하여 인증이 필요한 경우에만 해당 컴포넌트를 렌더링하는 AuthenticatedProfile 컴포넌트를 생성합니다. 이렇게 하면 인증이 필요한 여러 컴포넌트에서 중복된 인증 로직을 작성하지 않고도 코드를 재사용할 수 있습니다.

HOC의 장단점

HOC는 코드 재사용성과 추상화를 통해 컴포넌트의 기능을 확장하는 데 유용한 패턴입니다. 그러나 HOC를 남용하면 컴포넌트 계층 구조가 복잡해질 수 있으므로 적절하게 사용하는 것이 중요합니다.