[React] 고차 컴포넌트란? (HOC, Higher-Order Component)

  

고차 컴포넌트는 컴포넌트 로직을 재사용하기 위해 사용되고 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수입니다. 즉, 컴포넌트를 인자로 받거나 반환하는 함수입니다.

* 하이오더 컴포넌트(HOC, Higher-Order Component) 라고도 많이 불립니다. 

 

 

[주의 사항]

• render 메서드 안에서 고차 컴포넌트를 사용하시면 안됩니다.
  
  •  컴포넌트의 정의 바깥에 HOC를 적용하여 컴포넌트가 한 번만 생성
• 정적 메서드는 반드시 따로 복사해야 합니다. 
  •  메서드를 반환하기 전에 컨테이너에 복사
  •  hoist-non-react-statics를 사용하여 모든 non-React 정적 메서드를 자동으로 복사
  •  정적 메서드를 컴포넌트와 별도로 내보내기
• ref는 전달되지 않습니다.
  • React.forwardRef API 사용

 

 

[예제]

[App.js]

import './App.css';
import TestComponent from './Component/TestComponent';

function App() {
  return (
    <div >
        <h1 className="App-header">
          코딩병원 119
          <TestComponent name="itprogramming119"></TestComponent>
        </h1>
        
    </div>
  );
}

export default App;

 

 

[TestComponent.js]

마지막 라인에서 withChildrenTestComponent 컴포넌트를 호출하면서 TestComponent와 컴포넌트명을 파라미터로 전달하였습니다. 이때 TestComponent 컴포넌트는 export 되지 않기 때문에 render 함수가 실행되지 않습니다.

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

class TestComponent extends Component {
    render() {
        console.log('2. TestComponent render');
        return(
            <div>props.name : {this.props.name}</div>
        )
    }
}

export default withChildrenTestComponent(TestComponent, 'TestComponent');

 

 

[withChildrenTestComponent.js]

2번째 라인에서 withChildrenTestComponent 컴포넌트를 export 하면서 전달한 파라미터 (TestComponent, 컴포넌트명)을 받습니다. 전달받은 TestComponent는 TestComponent 컴포넌트 자체입니다. render()  함수가 실행되고 Incomponent 부분에서 TestComponent 컴포넌트가 실행되는 것이라고 생각하면 쉽습니다.

import React from 'react';
export default function withChildrenTestComponent(InComponent, InComponentName) {
    return class OutComponent extends React.Component {
        componentDidMount() {
            console.log(`3. InComponentName : ${InComponentName}`);
        }

        render() {
            console.log('1. InComponent render');
            return(
                <InComponent {...this.props}></InComponent>
            )
        }
    }
}

 

 

[출력 결과]

고차 컴포넌트(하이오더 컴포넌트)를 구현하면, 위와 같이 여러 컴포넌트에 동일하게 적용돼야 하는 공통 기능을 코드 중복 없이 사용할 수 있습니다.