React 로직 재사용 패러다임의 전환: HOC와 Hooks 분석

---

React 로직 재사용 패러다임의 전환: HOC와 Hooks 분석

---

1. 고차 컴포넌트 (Higher-Order Component, HOC)

1-1. HOC의 개념과 작동 원리

• 고차 컴포넌트는 컴포넌트를 인자로 받아 새로운 기능을 주입하여 새로운 컴포넌트를 반환하는 함수이다.

• 이는 React의 API가 아닌, 컴포넌트의 구성적 특성을 활용한 디자인 패턴에 해당한다.

• 수학적 모델로 표현하면 다음과 같다.

• 주로 횡단 관심사(Cross-cutting Concerns)인 인증, 로깅, 데이터 페칭 등을 분리하여 재사용할 때 사용한다.

1-2. 코드 구현 예시

• 인증 여부에 따라 컴포넌트 렌더링을 제어하는 HOC의 구조는 다음과 같다.

import React from "react";

const withAuth = (WrappedComponent) => {
  return class extends React.Component {
    render() {
      const isAuthenticated = localStorage.getItem("token");
      if (!isAuthenticated) {
        return <div>로그인이 필요합니다.</div>;
      }
      return <WrappedComponent {...this.props} />;
    }
  };
};

export default withAuth;

1-3. HOC의 한계점

• Wrapper Hell: 여러 개의 기능을 추가할수록 컴포넌트 트리가 깊어지고 복잡해지는 문제가 발생한다.
• Props 충돌: HOC가 주입하는 props의 이름이 원본 컴포넌트의 props와 중복될 경우 데이터가 덮어씌워질 위험이 존재한다.
• 정적 메서드 유실: 원본 컴포넌트의 정적 메서드가 반환된 컴포넌트에 자동으로 복사되지 않아 추가적인 처리가 필요하다.

---

2. 리액트 훅 (React Hooks)

2-1. Hooks의 등장 배경과 정의

• React 16.8 버전에서 도입되었으며, 클래스 기반 컴포넌트의 복잡성을 해결하고 상태 로직을 함수형 컴포넌트 내부에서 재사용하기 위해 고안되었다.
• 컴포넌트 계층 구조를 변경하지 않고도 독립적인 로직 단위로 기능을 캡슐화할 수 있다.

2-2. 코드 구현 예시

• 동일한 인증 로직을 커스텀 훅으로 변환하면 다음과 같이 간결해진다.

import { useState, useEffect } from "react";

const useAuth = () => {
  const [isAuth, setIsAuth] = useState(null);

  useEffect(() => {
    const token = localStorage.getItem("token");
    setIsAuth(!!token);
  }, []);

  return isAuth;
};

export default useAuth;

2-3. Hooks의 기술적 이점

• 평탄한 트리 구조: 컴포넌트를 외부에서 감싸지 않으므로 'Wrapper Hell' 현상을 방지하고 메모리 효율을 높인다.
• 명시적인 데이터 흐름: 로직이 컴포넌트 내부에서 호출되므로, 어떤 데이터가 어디서 오는지 파악하기 용이하다.
• 결합성: 하나의 컴포넌트 내에서 여러 개의 커스텀 훅을 조합하여 복잡한 로직을 구성하기에 유리하다.

---

3. 결론 및 현대적 관점의 선택

• 과거에는 로직 재사용을 위해 HOC와 Render Props 패턴이 주로 사용되었으나, 현대 React 개발에서는 Hooks가 표준으로 자리 잡았다.
• HOC는 여전히 외부 라이브러리와의 결합이나 특정 레이아웃의 전역적 적용 등 제한적인 상황에서 유효한 가치를 지닌다.
• 개발자는 코드의 가독성과 유지보수성을 고려하여, 상태 관련 로직 재사용에는 Hooks를 우선적으로 검토해야 한다.

---