커스텀 Hoc 만들기

주로 HOC 의 이름을 만들땐 with_____ 형식으로 짓습니다. react-route-dom의 withRouter도 Hoc의 일종이기 때문에 이렇게 이름을 붙인 것입니다.

 

우리는 웹요청을 하는 HOC 를 만들테니 withRequest 라고 지어주도록 하겠습니다.

 

HOC은 그냥 원소로 컴포넌트를 받는 컴포넌트입니다. 어떤 로직을 거친 후에 원소로 받은 컴포넌트를 리턴해주면 됩니다.

import React, { Component } from 'react';

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;

 

어떤 컴포넌트를 활용할 때 이 HOC으로 감싸주면 됩니다.

react-router-dom의 withRouter도 감싸주면 props가 자동으로 생겼는데 이러한 처리를 거쳤기 때문에 생긴 것으로 볼 수 있습니다.

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

class Post extends Component {
  render() {
    const { data } = this.props;
    
    if (!data) return null;

    return (
      <div>
        { JSON.stringify(this.props.data) }    
      </div>
    );
  }
}


export default withRequest('https://jsonplaceholder.typicode.com/posts/1')(Post);

 

 

 

참고)

컴포넌트에 날개를 달아줘, 리액트 Higher-order Component (HoC) | VELOPERT.LOG