React (13) Hoc

■ HOC(High-Order-Component) 

- 컴포넌트를 인자로 받거나 반환하는 함수이다.

- Hoc를 이용하면 여러 컴포넌트에서 동일하게 적용되어야 하는 공통 기능을 코드 중복없이 사용할 수 있다.

ex) 로깅, id체크

 

● HOC 예시코드

import withLogging from "./withLogging";

function Hoc(){

    return(
        <div>
            hoc..hoc..
        </div>
    )

}

export default withLogging(Hoc, 'Hoc');

 

● WithLogging.js 코드

const withLogging = (WrappedComponent, logging) => {
    return function WithLoggingComponent(props){
        // 필요한 공통로직 처리부분
        console.log("마운트된 컴포넌트? ", logging);
        
        // 매개변수로 전달받은 컴포넌트를 최종적으로 return
        return <WrappedComponent {...props}/>

    }   
}

export default withLogging;