REACT_HOC (Higher-Order Component) 하이오더컴포넌트 구하기

HOC (Higher-Order Component)

: 커링과 같이 함수 자체를 인자로 받거나 반환하는 함수를 '고차 함수' 라고 한다

이와 비슷하게 컴포넌트를 인자로 받거나 변환하는 함수를 '고차 컴포넌트 (Higher-Order Component)' 라고 한다

 

-하이오더 컴포넌트를 구현하면 여러 컴포넌트에 동일하게 적용돼야 하는 공통 기능을 코드 중복없이 사용할 수 있다 

withHocComponent.js 코드에서 예를 들면, line 8의 console.log 함수를 모든 컴포넌트에서 출력해야 하는데,

hoc을 구현하지 않았다면 각각의 컴포넌트에서 동일한 코드를 작성해야한다

 

- src 폴더에 Hoc 폴더 생성 후  R075_ReactHoc.js 생성

src 폴더에 Hoc 폴더 생성 후  R075_ReactHoc.js 생성

import React from 'react';
import withHocComponent from './withHocComponent';

class R075_ReactHoc extends React.Component {
    render() {
        console.log('2, HocComponent render')
        return(
            <h2>props.name : {this.props.name}</h2>
        )
    }
}
export default R075_ReactHoc;

 

-  src 폴더에 Hoc 폴더 생성 후 withHocComponent.js 생성

import React from 'react';
export default function withHocComponent(InComponent, InComponentName) {
    return class OutComponent extends React.Component {
        componentDidMount () {
            console.log(`3. InComponentName : ' ${InComponentName}`)
        }
        render() {
            console.log('1. InComponent render')
            return(<InComponent {...this.props}/>)
        }
    }
}

 

 

- src 폴더에 R075_ReactHoc1.js 생성

 

import React from 'react';
import HocComponent from "./Hoc/R075_ReactHoc";

function R075_ReactHoc() {
  return (
    <div className="App">
      <HocComponent name='React200'/>
    </div>
  );
}
export default R075_ReactHoc;

 

- App.js

import React from 'react';
//import './App.css'; 
//App.css가 App.js 보다 더 한 단계 상위 폴더에 있다면  
//'./..App.css'

import ReactHoc from './Hoc/R075_ReactHoc'
//import 'bootstrap/dist/css/bootstrap.css'

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <ReactHoc name='React 200'/>
    </div>
  );
}

export default App;

 

결과

대체먼말임