하이어오더 컴포넌트 (HOC)

'하이어오더 컴포넌트'는 자바스크립트의 고차 함수에서 유래되었습니다. 

 

하이어오더 컴포넌트는 주로 반복되는 작업을 할때 중복을 줄이기 위해서 사용합니다.

저는 Context API를 사용을 할때 많이 사용을 했습니다.

 

기본 개념은 다음과 같습니다.

1. HOC는 함수나 클래스 형태의 컴포넌트를 반환할수가 있습니다.

2. HOC는 기존 컴포넌트에 연결된 프로퍼티를 모두 전달해야합니다.

3. HOC는 이름은 보통은 with로 시작합니다.

 

예시로는 아래와 같이 공통된 API를 호출을 할 경우에 사용을 할수가 있습니다. 

import React, { Component } from 'react';
import axios from 'axios';

// URL 첫번째 매개변수
// WrappedComponent 실제로 감싸는 컴포넌트 
const withRequest = (url) => (WrappedComponent) => {
  return class extends Component {

    state = {
      data: null
    }
    
    // 공통적으로 보내는 API 호출
    async sendLog() {
      try {
        await axios.get(url);
        this.setState({
          data: response.data
        });
      } catch (e) {
        console.log(e);
      }
    }

    componentDidMount() {
      this.sendLog();
    }

    render() {
      const { data } = this.state;

      return (
      	// ...this.props을 통해서 WrappedComponent에게 props 전달
        // API호출후 DATA를 그대로 WrappedCopmpnent에게 전달
        <WrappedComponent {...this.props} data={data}/>
      )
    }
  }
}

export default withRequest;

import React, { Component } from 'react';
import withRequest from './withRequest';

class TEST extends Component {
  render() {
    const { data } = this.props;
    
    return (
      <div>
        { JSON.stringify(data) }    
      </div>
    );
  }
}


// 첫번째 매개변수 API url
// 두번째는 TEST 컴포넌트 전달
export default withRequest('API 호출')(TEST);