Q. 리액트 HOC란?

🧐 HOC(Higher Order Component) 란?

컴포넌트를 매개변수으로 받아서 새로운 컴포넌트를 반환하는 함수다.

• 컴포넌트의 공통로직을 만들어서 재사용하고 싶을 때 사용한다.
• 클래스형 컴포넌트에서 사용한다. (함수형은 custom hook 으로)
• react-router의 withRouter도 HOC
• redux의 connect도 HOC

🧐 HOC를 어디에 쓸 수 있을지? 구체적인 예

• 주로 HOC 의 이름을 만들땐 with_____ 형식 으로 작성한다.
• WrappedComponent 컴포넌트를 받아서 새로운 WrappedComponent 컴포넌트를 반환하기!

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

const withRequest = (url) => (WrappedComponen) => {
  return class extends Component {

    state = {
      data: null
    }

    async initialize() {
      try {
        const response = await axios.get(url);
        this.setState({
          data: response.data
        });
      } catch (e) {
        console.log(e);
      }
    }

    componentDidMount() {
      this.initialize();
    }

    render() {
      const { data } = this.state;
      return (
        <WrappedComponent {...this.props} data={data}/>
      )
    }
  }
}

export default withRequest;