• HOC는 컴포넌트를 인자로 받아 조합하여 새로운 컴포넌트를 반환하는 함수
• 컴포넌트 로직을 재사용 하기 위한 방식
• 보통 횡단 관심사를 분리하는데 사용한다.

횡단 관심사(Cross-Cutting concerns)

• ‘어떤 것을 가로지르는 관심사’ 라는 뜻
• 각 계층을 넘어 공통으로 필요한 관심사
  • 프론트에서 컴포넌트가 계층적으로 나눠져 있지만 여러 컴포넌트에서 공통으로 사용해야할 관심사
• ex) 전역 스토어, 로그인 정보

• 예시 코드

  디자인 시스템을 위해 컴포넌트가 얼마나 사용되는지 기록을 남기고 모니터링하고자 한다.

  • 컴포넌트가 마운트 될 때마다 기록한다.
  • Button 컴포넌트를 클릭할 때마다 기록한다.

  // Header 컴포넌트
  class Header extends React.Component {
    componentDidMount() {
      // 로깅
      console.log(`[Header] 마운트`)
    }
  
    render() {
      return <header>Header</header>
    }
  }
  

  // Button 컴포넌트
  class Button extends React.Component {
    componentDidMount() {
      // 로깅
      console.log(`[Button] 마운트`)
    }
  
    handleClick = () => {
      // 로깅
      console.log(`[Button] 클릭`)
    }
  
    render() {
      return <button onClick={this.handleClick}>클릭</button>
    }
  }
  

  위 코드는 두가지 문제점이 있다.

  1. 중복된 코드
     • 두 컴포넌트 모두 같은 생명주기 메서드를 사용하고 같은 로그 기록 함수를 호출한다.
  2. 관심사 분리 X
     • 로깅은 각 컴포넌트 고유의 역할이 아니다.
     • 두 컴포넌트는 헤더 영역 UI를 렌더하고 클릭할 수 있는 버튼을 렌더하는 것만을 책임져야 한다.
     • 로깅은 어플리케이션 전반에 사용되는 공통의 기능이다.

HOC 만드는 법

1. 함수 with이름(InputComponent, 그밖에 인자들...)작성한다.
   • 매개 변수로 감싸질 하위 컴포넌트와, 추가로 필요한 인자들을 받는다.
   • 내부에 만든 새로운 컴포넌트(OutputComponent)를 반환한다.
2. 함수 내에서 새로운 컴포넌트(OuputComponent)를 생성한다.
   • 공통으로 사용할 기능을 라이프 사이클 메서드에 추가한다.
   • 추가할 prop이 있을 경우 render 메서에서 반환한 inputComponent에 추가한다.
   • OuputComponent의 render메서드에서 inputComponent를 반환한다.

예제

마운트 시 이벤트 발동

• componentDidMount()될 때 이벤트가 발생한다.

function withMountEvent(InputComponent, componentName){ // 필요한 매개변수는 추가하기
  return (
    // 반환 컴포넌트 작성
    class OutputCompnent extends React.Component {
      // 마운트 라이프 사이클에서 이벤트 작성
      componentDidMount() {
        sendEvent(componentName);
      }
      render(){
        return (
          <InputComponent {...this.props} /> // InputComponent를 OuputComponent에서 반환
        )
      }
    }
  )
}

마운트 여부를 알려주는 HOC