React 컴포넌트 재사용을 위한 HOC 패턴 적용기

문제 상황

대시보드 프로젝트에서 여러 페이지마다 동일한 인증 체크 로직이 반복되고 있었다. 각 컴포넌트의 componentWillMount에서 로그인 상태를 확인하고, 미인증 시 로그인 페이지로 리다이렉트하는 코드가 중복되었다.

HOC로 해결

Higher-Order Component 패턴을 적용해 인증 로직을 분리했다.

function withAuth(WrappedComponent) {
  return class extends React.Component {
    componentWillMount() {
      if (!this.props.isAuthenticated) {
        this.props.history.push('/login');
      }
    }

    render() {
      return this.props.isAuthenticated 
        ? <WrappedComponent {...this.props} />
        : null;
    }
  }
}

// 사용
const DashboardPage = withAuth(Dashboard);

적용 결과

각 페이지 컴포넌트에서 인증 로직이 완전히 제거되었고, withAuth로 감싸는 것만으로 보호된 라우트를 만들 수 있게 되었다. 코드 중복이 줄고 관심사 분리가 명확해졌다.

주의점

HOC를 render 메서드 내부에서 생성하면 매번 새로운 컴포넌트가 만들어져 성능 문제가 발생한다. 반드시 컴포넌트 외부에서 정의해야 한다. 또한 ref는 자동으로 전달되지 않으므로 필요하다면 명시적으로 처리해야 한다.

React 공식 문서의 HOC 패턴 설명이 많은 도움이 되었다.