High ordered Component, High ordered Function

상위 권한을 갖고있는 컴포넌트, 함수 이다.

HOC

컴포넌트를 가져와 컴포넌트를 반환하는 함수이다.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

컴포넌트는 props를 UI로 변환하는 반면, 고차 컴포넌트는 새로운 컴포넌트를 반환한다. 수업시간에 한 예제코드를 보자.

import { withAuth } from "../../../../src/components/commons/example/hoc/withAuth";

function MainPage() {
  return <>메인페이지입니다.</>;
}

export default withAuth(MainPage);

구체적인 과정은 안보이겠지만, 결론적으로 withAuth라는 함수형 컴포넌트의 인자로서 MainPage라는 컴포넌트를 할당해준 경우이다.

기입해놓진 않았지만 내용은 대충 로그인 유무를 검증하는 함수이다.

HoF

비슷한 뉘앙스로 고차함수이다.

함수안에서 또 다른 함수를 리턴하는 형식이다.

용어를 분리해놓긴 했지만 평소 사용하던 형식인 onClickEvent console.log 를 같이쓰는 경우를 생각해보자

const onClickConsole = () => {
  console.log('qqq')
}

위의 코드를보자.

onClickConsole 은 우리가 임의로 선언해준 이벤트핸들러 함수이고, console.log() 는 vscode 내장함수이다.

우리는 onClickConsole 이라는 함수를 호출해서 console.log() 라는 함수를 호출하는 것이기 때문에, 고차함주 형식이라고 말할 수 있다.
(멘토님께 직접물어본 사항, 혹시나 틀리다면 포스팅 수정하겠음.)

결론 : 함수의 리턴값으로 함수를 호출하는 형태.