High Order Function (HOF)

이번에 이벤트 리스너의 콜백함수에로 값을 전달해야 될때 HOF으로도 가능하다는 것을 알았다

코드 1-1.

// 기존 사용 방식 : 이벤트 콜백함수에 인자가 필요하면 익명함수 형태로 전달
const onClickButton = (textList: string[], index:number, boxType: 'whatYouCanLearn' | 'expectedStudents' | 'requiredKnowledge') => {
  const textArray = [...textList];
  textArray.splice(index, 1);
  switch (boxType) {
        case 'whatYouCanLearn':
          dispatch({
            type: DELETE_ITEM_WHATYOUCANLEARN,
            data: textArray,
          });
          break;
        case 'expectedStudents':
          dispatch({
            type: DELETE_ITEM_EXPECTEDSTUDENTS,
            data: textArray,
          });
          break;
        case 'requiredKnowledge':
          dispatch({
            type: DELETE_ITEM_REQUIREDKNOWLEDGE,
            data: textArray,
          });
          break;
        default:
          console.error('boxType is wrong');
      }
}

<TextListBox key={index} onClick={() => onClickButton(data?.textlist, index)} />

코드 1-2.

// 새롭게 적용하는 방식 : 함수를 리턴하는 함수를 만들어서 전달
const onClickButton = (textList: string[], index:number, boxType: 'whatYouCanLearn' | 'expectedStudents' | 'requiredKnowledge') = () => {
  const textArray = [...textList];
  textArray.splice(index, 1);
  switch (boxType) {
        case 'whatYouCanLearn':
          dispatch({
            type: DELETE_ITEM_WHATYOUCANLEARN,
            data: textArray,
          });
          break;
        case 'expectedStudents':
          dispatch({
            type: DELETE_ITEM_EXPECTEDSTUDENTS,
            data: textArray,
          });
          break;
        case 'requiredKnowledge':
          dispatch({
            type: DELETE_ITEM_REQUIREDKNOWLEDGE,
            data: textArray,
          });
          break;
        default:
          console.error('boxType is wrong');
      }
}

<TextListBox key={index} onClick={onClickButton(data?.textlist, index)}

그 전엔 anonymous 함수를 그 자리에서 만들어서 값을 전달했었는데 더 섹시한 방법이 있는 걸 알게 되니 앞으로 이렇게 사용해야겠다는 생각이 든다

그 전에 HOF가 무엇인지 명확히 알고갈 필요가 있다

High Order Function

• 하나 이상의 함수를 인자로 받는다.
• 함수를 결과로 반환한다.

Use Case

array method

• Array.prototype.filter(), map(), reducer()

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);

• filter()
• 필터링 하는 조건을 함수를 통해 제어하는 것

ramda

• 읽어봐도 잘 모르겠다.

내가 작성한 코드는 HOF 인가?

• 함수를 리턴하는 것은 맞지만 함수를 인자로 받지 않기 때문에 HOF이라기 보단 함수를 리턴하는 함수라고 표현하는게 맞는 걸까

• 그래도 1-1.보다 1-2. 코드가 메모리를 더 적게 사용할 것 같다.

  • https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener#%EB%A9%94%EB%AA%A8%EB%A6%AC_%EC%9D%B4%EC%8A%88
  • 리액트의 useCallback을 같이 사용하면 더 좋을 것 같다.

useCallback

• 함수 memoization(메모이제이션)하기 위해 사용되는 hook 함수
• 컴포넌트 안에 함수가 선언이 되어 있다면 해당 컴포넌트가 렌더링 될 때 마다 새로운 함수가 생성 됨
  • course_info가 페이지 그 자체이므로 렌더링이 다시 될일은 없어서 useCallback을 사용해도 아무런 효과가 없을 것 같다.

참고 문헌

• https://medium.com/@la.place/higher-order-function-%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-1c61e0bea79
• 고차 함수 이해하기
• useCallback

관련 커밋

• https://github.com/Ark-inflearn/inflearn-clone-front/commit/16bc932918159b32878a7e4101fd9560ad03a2c8