React 💬16

🎈 Higher Order Component 🎈

 

📌 기존 구성 요소에 기능을 추가하는데 사용되는 JavaScript 기능이다.

📌 데이터를 수신하고 해당 데이터에 따라 값을 반환하는데 입력 데이터가 변경되면 HOC가 재실행된다.

📌 구성요소를 업데이트하기 위해서는 HOC를 변경할 필요는 없고, 우리 함수가 사용중인 데이터만 바꾸면 된다.

 

 

🔧 MyHOC는 MyComponent에 데이터를 전달할때만 사용 되는 함수이다.

import React from 'react';

var newData = {
   data: 'Data from HOC...',
}

var MyHOC = ComposedComponent => class extends React.Component {
   componentDidMount() {
      this.setState({
         data: newData.data
      });
   }
   render() {
      return <ComposedComponent {...this.props} {...this.state} />;
   }
};
class MyComponent extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.data}</h1>
         </div>
      )
   }
}

export default MyHOC(MyComponent);

 

💻

 

📢 HOC는 다른 기능들을 위해서도 쓰일 수 있다. 이 순수한 기능들은 기능적 프로그래밍의 정수이고, 앱의 유지 관리 또는 업그레이드가 점점 쉬워지는 것을 느낄 수 있을 것이다.