HOC

Higher Order Component 의 약자로 특정 컴포넌트를 실행하기 전에 상위 컴포넌트를 먼저 실행시켜주는 방식.
HOC 컴포넌트를 만들어주어 특정 컴포넌트가 실행되기 전에 HOC함수를 붙여 실행되면 다음 컴포넌트 이동

특정 컴포넌트 ➡️ HOC 함수 ➡️ 다음 컴포넌트

import { useRouter } from "next/router";
import { useEffect } from "react";

export const WithAuth = (Component: any) => (props: any) => {
  const router = useRouter();

  useEffect(() => {
    if (!localStorage.getItem("accessToken")) {
      alert("로그인 후 이용 가능합니다.");
      router.push("./signin");
    }
  }, []);

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

위 코드는 로컬 스토리지에서의 accessToken이 없다면 로그인 페이지로 돌려버리는 useEffect를 가지고 있는 코드이다.
권한을 확인하여 분기를 시켜주는 코드로 권한이 필요한 페이지에 접근하기 전에 먼저 실행되어 권한이 있다면 원하는 페이지 접근을 허가하고 권한이 없다면 (로그인페이지로) 강제로 다른 페이지로 보내버린다.
HOC 컴포넌트가 마운트 될 때 먼저 권한에 대해서 확인을 하고 없다면 다른 페이지로, 혹은 이전 페이지로 보내는 것

import { WithAuth } from "../../src/components/commons/hocs/withAuth";

function MyPage() {
  return <div>마이 페이지</div>;
}

export default WithAuth(MyPage);

withauth 컴포넌트를 import 그리고 Mypage 라는 그리는 함수에 씌어준다.
컴포넌트를 실행시킬 때 먼저 HOC(WithAuth)컴포넌트를 실행시키고 다음에 원하는 컴포넌트(Mypage)를 실행시킬 수 있다.

HOF

: Higher Order Function
HOC와 비슷한 형태이나. return 값이 HOC가 jsx 형태를 띄고 있다면 HOF는 일반함수의 형태를 가지고 있음.
e.target.id 를 통해서 해당 버튼이나 div 박스의 id값을 통해서 원하는 작동을 하도록 코드를 작성했었는데, 이 방법의 id는 고유한 값이기 때문에 남발하면 안된다.
중복된 값이 생길 경우 오류가 나올 수 있다.

HOF를 사용하면 이런 문제를 방지하고, id값을 가져와서 프레임워크를 사용할 때 발생하는 문제를 해결할 수 있다.

export default function Bbb(){
	const onClickButton = (id) => (event) => {
		console.log(id)
	}
	return <button onClick={onClickButton(123)}>클릭</button>
}

Lodash와 같은 함수형 라이브러리에서 자주 사용하는 throttle, debounce 등도 모두 HOF 함수