📌 HoC

High-order Component (고차 컴포넌트)

• 코드를 작성하다보면, 자주 반복해서 작성하게 되는 코드들이 있다. 주로 그런 코드들을 함수화하여 사용한다.
• 컴포넌트도 마찬가지이다. 컴포넌트를 작성할 때 반복되는 코드들은, Hoc을 만들어서 해결할 수 있다.
• HOC는 컴포넌트를 가져와 기능을 추가하여 새 컴포넌트를 반환하는 함수이다.
• 컴포넌트 로직을 재사용하기 위해 사용된다.

✨ 반복되는 코드

// Post.js
import React, { Component } from 'react';
import axios from 'axios';

class Post extends Component {
  state = {
    data: null
  }
  
  async initialize() {
    try {
      const response = await axios.get('https://jsonplaceholder.typicode.com/posts/1');
      this.setState({
        data: response.data
      });
    } catch (e) {
      console.log(e);
    }
  }

  componentDidMount() {
    this.initialize();  
  }


  render() {
    const { data } = this.state;
    
    if (!data) return null;

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

export default Post;

// Comments.js
import React, { Component } from 'react';
import axios from 'axios';

class Comments extends Component {
  state = {
    data: null
  }

  async initialize() {
    try {
      const response = await axios.get('https://jsonplaceholder.typicode.com/comments?postId=1');
      this.setState({
        data: response.data
      });
    } catch (e) {
      console.log(e);
    }
  }

  componentDidMount() {
    this.initialize();
  }


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

    if (!data) return null;

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


export default Comments;

✨ HoC 작성하기

• 반복되는 코드를 없애기 위해 하나의 함수, HoC을 작성한다.
• 주로 HoC의 이름을 만들 때 with_ 형식으로 짓는다.

  💡 인자로 컴포넌트를 받고, 새 컴포넌트를 반환한다. 반환된 컴포넌트 안에서 인자로 받은 컴포넌트를 렌더링한다. 이때 인자로 받은 컴포넌트의 원래 props 들을 그대로 전달하고, 필요에 따라 추가 props도 넣어준다.

❗ Closure 개념이 사용되었다. HoC이 종료되어도 반환된 컴포넌트는 Hoc이 인자로 받은 컴포넌트를 기억해야 한다!

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

const withRequest = (url) => (WrappedComponent) => {
  return class extends Component {
    state = {
       data: null
    }
    async initialize(){
       try{
           const response = await axios.get(url); // 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}/> // WrapperComponent를 기억해야 함.
      )
    }
  }
}

export default withRequest;

✨ HoC 사용하기

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);

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

class Comments extends Component {
  render() {
    const { data } = this.props;

    if (!data) return null;

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


export default withRequest('https://jsonplaceholder.typicode.com/comments?postId=1')(Comments);

❗ 고차 컴포넌트를 사용하는 방법이 리덕스의 connet함수와 매우 유사하다고 생각했는데 공식 문서를 읽어보니 connect함수에서 고차 컴포넌트를 이용한다고 한다.