[TIL] HOC

👉 Higher - order Component (HOC)

: 하나의 함수인데, 함수를 통하여 컴포넌트에 우리가 준비한 특정 기능을 부여한다.

반복되는 코드를 없애기 위해서 하나의 함수를 작성한다. HOC의 이름을 만들땐 with__ 형식으로 이름을 짓는다. HOC의 원리는, 파라미터로 컴포넌트를 받아오고, 함수 내부에서 새 컴포넌트를 만든 다음에 해당 컴포넌트 안에서 파라미터로 받아온 컴포넌트를 렌더링하는 것이다. 그리고, 자신이 받아온 props들은 그대로 파라미터로 받아 온 컴포넌트에게 다시 주입해주고, 필요에 따라 추가 props도 넣어준다.

2020.05.28 수정 👇

// HOC 형태
import React, { Component } from 'react'

const withHoc = (parameter) => (WrappedComponent) => {
  return class extends Component {
    render(){
      return (
        <WrappedComponent {...this.props} />
      )
   }
}

export default withHoc

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

class TestComponent extends Component {
  {/*...*/}	
}

export default withHoc(parameter)(TestComponent)