[1] HOC(Higher Order Component)

• 여러곳에서 반복해서 사용하는 컴포넌트를 정의하고 실행해서 1개의 컴포넌트에서 관리할 수 있다. 중간에 가로채는 역할을 할 수 있어서 필터나 권한 분기 처리등의 용도로 사용이 가능하다.

import Zzz from "";

export default function Aaa() {
    return <Zzz qqq="철수" />;
}

////////////////

const Hoc = (Component) => (props) => {
    return <Component {...props} />;
}
export default Hoc;

//////////////////

function Bbb(props) {
    return <div> 이름: {props.qqq} <div/>;
}
export default Hoc(Bbb);


// hoc를 사용하게되면 function 보다 arrow 방법이 더 깔끔? 하다고 생각이 된다.
// export default Hoc(LoginSuccessPage);

[2] HOF(Higher Order Function)

클로저를 반환해서 계속 사용을 할 수 있는 것이다.
단, 너무 depth를 깊게 만든다면 함수가 종료되는데 너무 시간이 오래걸리고 메모리를 차지하게 된다.

const hof = (a) = (b) => {
    console.log(a); // 10
    console.log(b); // 20
}

hof(10)(20)

잘못된 사용 예시
depth가 너무 깊으면 안된다.

function hof1() {
    function hof2() {
        ...
        function hof100() {
    const hof101 = () = () => {
    console.log("");
}
    }
}