1. 고차 컴포넌트(HOC) 개요

고차 컴포넌트(HOC) 패턴은 컴포넌트 간 로직을 재사용하는 React의 구성 기술이다. HOC는 컴포넌트를 받아 추가 또는 확장된 기능을 갖춘 새로운 컴포넌트를 반환하는 함수이다.

즉, 고차 컴포넌트는 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수다.

먼저 고차 함수(HOF)에 대해서 알아보자. 고차함수란 다른 함수를 인자로 받거나 함수를 반환하는 함수를 고차 함수라고 한다.

React에서는 고차 컴포넌트(HOC)가 고차 함수(HOF)를 활용한 일반적인 패턴이다.

2. 고차 컴포넌트(HOC) - 코드 재사용

고차 컴포넌트(이하 HOC)는 코드 재사용성을 높이는 데 매우 유용하다.

여러 컴포넌트에서 공통적으로 사용되는 로직이 있다면, 이를 HOC로 만들어 재사용할 수 있다.

예를 들어, 인증 체크나 권한 관리 등의 로직은 애플리케이션 전반에서 사용될 수 있다. 이러한 로직을 HOC로 작성하면 중복 코드를 줄일 수 있다.

HOC는 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 함수이다. 반환된 컴포넌트에는 HOC에서 구현한 로직이 포함되어 있기 때문에 HOC를 사용하는 컴포넌트에서는 추가적인 작업 없이 해당 로직을 활용할 수 있다.

이를 사용하는 컴포넌트는 별다른 추가 작업 없이 해당 로직을 그대로 활용할 수 있다. 이런 방식으로 여러 컴포넌트가 동일한 기능을 재사용하게 되므로, 유지보수와 코드 관리의 효율성이 높아진다.

// withAuthentication.js
import React, { useEffect, useState } from 'react';
import { auth } from './auth';

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

    useEffect(() => {
      auth.isAuthenticated().then((authenticated) => {
        setIsAuthenticated(authenticated);
      });
    }, []);

    return isAuthenticated ? (
      <WrappedComponent {...props} />
    ) : (
      <div>Loading...</div>
    );
  };

  return AuthenticatedComponent;
};

export default withAuthentication;

// MyComponent.js
import React from 'react';
import withAuthentication from './withAuthentication';

const MyComponent = (props) => {
  return <div>My Component</div>;
};

export default withAuthentication(MyComponent);

3. 고차 컴포넌트(HOC) - Props 조작