HOF :: Higher Order Function

연관 내용
[HOC]
[React Currying]

HOF

Higher Order Function

• 먼저 실행되는 함수

• Closure로부터 확장된 개념이다.

• 함수를 인자로 전달받거나 리턴값으로 함수를 반환하는 함수를 의미한다.

• 반복되는 특정 로직을 쉽게 재사용하기 위해 사용한다.

• HOF vs HOC : 최종 return 값이 JSX이면 HOC이고, JSX가 아닌 것이 HOF이다.

1. 함수를 리턴하는 함수

function aaa() {
  const apple = 10;
  return function bbb() {
    const banana = 20;
    console.log(banana);
    console.log(apple);
  };
}

// 실행
aaa()();

여기서 aaa가 bbb보다 먼저 실행되는 HOF이다.

2. 인자가 있는 함수를 리턴하는 함수

function aaa2(apple:number) {
  return function bbb(banana:number) {
    console.log(banana);
    console.log(apple);
  };
}

// 실행
aaa(10)(20);

3. 인자가 있는 함수를 리턴하는 함수 - 화살표 함수

const aaa3 = (apple: number) => (banana: number) => {
  console.log(banana);
  console.log(apple);
};

// 실행
aaa3(10)(20);

4. 인자가 있는 함수를 리턴하는 함수 - 인자 여러 개

인자의 개수를 추가할 수 있다.

const aaa4 = (apple: number) => (banana: number) => (tomato: number) => {
  console.log(banana);
  console.log(apple);
  console.log(tomato);
};

aaa4(10)(20)(30);

활용하기

• 이전에는 id에 필요한 값을 넣어서 event.target.id로 사용했는데, 이 방식은 고유한 id를 태그에 입력하게 되므로 id가 중복되면 오작동할 가능성이 있다는 문제점이 있다.
• material UI, Ant design 같은 라이브러리의 컴포넌트에서 id가 사라지는 문제점도 HOF를 사용함으로 인해 해결할 수 있다.

기존의 onClick은
onClick={onClickChild}라고 작성하면 자동으로 onClickChild(event)가 실행되었다.

HOC에서 했던 방식과 동일하게
onClick={onClickChild(el)}로 바꾸게 되면, onClickChild(el)(event)이 실행되고,
closure에 의해서 el과 event 둘 다 접근이 가능해진다.

export default function HofPage() {
  // @ts-ignore
  const onClickChild = (el) => (event) => {
    // closure에 의해서 el과 event 둘 다 사용할 수 있다.
    // 여러개를 더 추가하는 것도 가능하다.
    console.log(el);
  };

  return (
    <div>
      {["철수", "영희", "훈이"].map((el) => (
        <div key={el} onClick={onClickChild(el)}>
          {el}
        </div>
      ))}
    </div>
  );
}