[코드캠프 5주차]React HOC vs HOF

[HOF]

HOF 는 고차 함수 이다. 고차 함수는 함수를 인수로 취하고 새로운 함수를 반환 하는 함수 이다.
자바스크립트의 함수는 일급 객체이다. 일급 객체란? 함수를 하나의 변수로 사용할 수도 있거나,파라미터로 사용할 수도 있고 리턴도 할 수 있기 때문에 자바스크립에서 함수는 일급 객체 이다.

HOF는 이 일급객체의 특성을 이용하여 사용하는 함수이다.
HOF 는 High Order Function 의 줄임말이다.
간단한 예제를 통해 확인해 보자

const aaa=()=>{
  console.log("aaa")
}

const HOF=(func)=>{
console.log("여기 있는 내용들 먼저 실행 시켜줄래?")
return func();
}

const bbb = HOF(aaa)
bbb();
//여기 있는 내용들 먼저 실행 시켜줄래?
//aaa

간단한 코드 설명을 붙여보자면, aaa라는 함수를 선언만 해놓고 HOF 함수에서 파라미터로 함수를 넘겨받아서 HOF 안에 있는 내용을 먼저 실행하고 나서 파라미터로 받은 aaa 함수를 HOF 함수 안에서 실행 시키는 것을 확인 할 수있다.
즉 HOF 가 고차 함수가 되는 것이다.

[HOC]

HOC는 자바스크립트의 HOF에서 착안 된 리액트 만의 고급 기술이다.
별도의 리액트에서 기능을 지원해 주는 것이 아니라,리액트의 컴포넌트의 특성을 살려서 HOF 와 비슷하게 구현을 할 수 있도록 지원해 주는 하나의 기술인 것이다.
HOF 와 별로 다를게 없다.

HOC는 High Order Component 의 줄임말이다.
즉 고차 컴포넌트 라고도 불려진다.

간단하게 컴포넌트로 고차 컴포넌트를 만들어 본다면

//HOC.js
import { useEffect } from "react";

const HOC = (Component) => (props) => {
  useEffect(() => {
    console.log("로그인 검증 기능 실시");
  }, []);

  return <Component {...props}></Component>;
};

export default HOC

우선적으로 HOC 에서 하나의 컴포넌트를 파라미터로 받고 props도 함께 같이 받는다.
그리고 HOC 함수가 실행 될때 우선적으로 useEffect 를 먼저 실행 시킴으로써 로그인 검증 기능 실시 라는 콘솔을 우선적으로 먼저 찍어낸다.

//AppComponent.js
import HOC from "./HOC";

const AppComponent = () => {
  return <div>인증 절차</div>;
};

export default HOC(AppComponent);

그리고 난 후에 export 할때 HOC 를 실행시키면서 파라미터로 AppComponent를 같이 보낸다. 그러면 AppComponent 가 렌더링 될때, HOC가 같이 실행되면서 로그인 검증 기능 실시 라는 내용이 우선적으로 출력되고 그 뒤에 AppComponent 의 내용이 렌더링 되는 것을 확인 할 수 있다.

이렇게 함으로써 일일이 하나하나 useEffect를 사용하여 각각의 컴포넌트 에다가 로그인 검증 기능을 useEffect로 해줄 필요 없이 하나의 컴포넌트(HOC)로 useEffect 안의 내용을 같이 공유할 수 있게 해준다.