HOC

HOC(Higher Order Component)는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술입니다.
고차 컴포넌트(HOC)는 React API의 일부가 아니며, React의 구성적 특성에서 나오는 패턴입니다.

구체적으로, 고차 컴포넌트는 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수다.

custom-hooks

이 기능이 40페이지가 된다면 이 작업또한 40페이지에 다 적어줘야 한다.
로그인 주소가 바뀌면?
40페이지 모두 가서 로그인 주소를 바꿔줘야한다.

Higher order component
HOC에 넣어주자.

Bbb컴포넌트가 실행되기 이전에
HOC 컴포넌트가 먼저 실행될 것이다.
이것이 Higher Order Component
이곳에 로그인 여부 체크를 해주면 된다.

HOC는 컴포넌트는 보통 with라는 이름으로 짓는다
withAuth(인증 여부를 검사하는 HOC가 될것이다)
export default WithAuth(Bbb)

HOF

Higher Order Function : 고차함수
하나 이상의 함수를 받고, 함수를 결과로 반환한다.

갯수를 맞춰서 순서에 맞게 데이터를 넘기면 클로저에 의해
onClickChild에서 사용이 가능하다

Curring

커링(Currying) 기법은 인자가 여러개인 함수의 일부 인자를 고정시키는 새로운 함수를 만드는 기법을 의미합니다.
인자가 n개인 함수를 n개로 분리하여 사용하게끔 만드는 기법이다.

function helloFunc(word, name) {
    console.log(`${word}, ${name}`);
}

word와 name이라는 두 개의 인자를 받아서 출력해주는 단순 함수다.
이 함수에 커링을 적용해 보자

function helloFunc(word) {
    return function (name) {
        console.log(`${word}, ${name}`);
    };
}

const printHello = helloFunc("hello"); 
printHello("Tibetan Fox"); // hello, Tibetan Fox
printHello("Tiger");       // hello, Tiger

n(2)개의 인자를 받던 함수가 n(2)개로 쪼개진 것을 볼 수 있습니다.

또한 첫 번째로 받던 인자인 word를 hello라는 값으로 고정하고 name만 변경하면서 사용 가능한 것 또한 볼 수 있다.

즉 커링 기법은 일부 인자에 같은 값을 반복적으로 사용할 때 그 반복되는 인자를 고정함으로써 중복을 최소화 하기에 적합한 기법이다.

주의할 점.
커링 기법을 적용할 때 인자의 순서가 매우 중요하다.
변동 가능성이 적은 인자는 앞에, 변동 가능성이 높은 인자는 뒤에 배치해야한다.

출처