[React] React에서 HOC(High Order Components)란?

 

 

1. HOC(High Order Components) 란?

Higher Order Component (HOC)는 React에서 사용되는 디자인 패턴 중 하나로, 컴포넌트 간의 로직을 재사용하고 추상화하기 위한 방법이다. HOC는 함수로 구현되며, 기존의 컴포넌트를 props로 받아서 감싼 후 새로운 컴포넌트를 리턴한다.

HOC를 잘 사용하면 컴포넌트 간에 공통된 로직을 추상화하여 코드의 재사용성을 높이고 모듈성을 향상 시킬 수 있다. 나는 작년에 진행했던 프로젝트에서 HOC를 인증토큰이 필요한 페이지 즉 권한이 없이는 접근할 수 없는 페이지를 감싸는 데에 사용했다. (예: 마이페이지, 구매내역 등)

아래는 예시로 작성한 component 코드이다.

import React, { useState } from 'react';

const withAuthentication = (WrappedComponent) => {
  return (props) => {
    const [isAuthenticated, setIsAuthenticated] = useState(false);

    // 실제 인증 로직은 useEffect 등을 이용하여 추가될 수 있음

    return (
      <div>
        {isAuthenticated ? (
          <WrappedComponent {...props} />
        ) : (
          <p>Please login to access this content.</p>
        )}
      </div>
    );
  };
};

const AuthenticatedComponent = withAuthentication(MyComponent);

 

2. HOC을 사용할 때 주의해야할 점

1) Props 충돌

이름이 같은 props 생성하거나 사용한다면 충돌일 발생할 수 있다. 

2) 많은 HOC 중첩이 초래하는 렌더링 성능 악화

HOC를 너무 여러 단계로 중첩해서 사용할 시 오히려 가독성이 떨어지고, 디버깅하기 어려워지며 렌더링 성능을 악화시킬 수 있다.