React - HOC(High-Order-Component)

안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)

yeonee 블로그 : 네이버 블로그

 

 

* HOC(High-Order-Component)

    HOC(High-Order-Component) : 컴포넌트를 인자로 받거나, 반환하는 함수

    Hoc를 이용하면 여러 컴포넌트에서 동일하게 적용되어야 하는 공통기능을 
    코드 중복 없이 사용할 수 있다.
    ex) 로깅, id체크, 권한 체크

 

import { withLogging } from "./withLogging";

function Hoc(){

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

export default withLogging(Hoc, 'Hoc');

+ export 부분이 다른 점이 포인트이다.

import './App.css'
import Hoc from './15_Hoc';

function App4(){
    return(
        // <ContextApi/>
        // <RouterComponent/>
        // <ReactRef/>
        <Hoc/>
    )
}

export default App4;

 

export const withLogging = (WrappedComponent, logging) => {
    return function withLoggingComponent(props) {
        // 필요한 공통로직 처리부분
        console.log("마운트된 컴포넌트? " , logging);

        // 매개변수로 전달받은 컴포넌트를 최종적으로 return
        return <WrappedComponent {...props}/>
    }
}

// export default withLogging; 상단 위에 export 넣어줘도 됨