HOC : Higher Order Component

특정 컴포넌트를 실행하기 전에 상위 컴포넌트를 먼저 실행시켜주는 방식이다
HOC 함수를 하나 만들어서 특정 컴포넌트가 실행되기 전 붙여주어서 HOC 함수가 실행되면 다음 컴포넌트로 이동하도록 해준다

오늘 우리 수업에서는 로그인 정보를 입력하고 토큰이 발급된 것을 확인하면 다음 페이지로 이동하는 기능 구현에 사용하였다

// 로그인이 되었는지 즉 인증여부를 검사하는 컴포넌트 입니다
import { useRouter } from "next/router";
import { useEffect } from "react";

// @ts-ignore
export const withAuth = (Component) => (Props) => {
  const router = useRouter();

  // 권한분기 로직 추가하기
  useEffect(() => {
    if (!localStorage.getItem("accessToken")) {
      alert("로그인 후 이용 가능합니다");
      router.push("/23-04-login-check");
    }
  }, []);

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

localStorage에 토큰이 존재하는지 확인하고 존재한다면 로그인 성공페이지로 이동하는 역할을 만들어주었다

event.target.id를 사용하지 않아도 되고 id 사용을 줄여주는 역할을 한다

컴포넌트로 만들어줘서 이곳저곳에서 사용이 가능하게끔 만들었다

---

HOF:Higher Order Function

HOC와 비슷하지만 HOF는 함수의 형태를 띄고 있다

export default function HofPage() {
  // @ts-ignore

  const onClickButton = (el) => (event) => {
    console.log(el);
  };

  return (
    <div>
      <button onClick={onClickButton(123)}>임의의 버튼</button>
    </div>
  );
}

함수를 만들고 화살표 함수로 만들어 준뒤 버튼이 눌릴때 마다 함수가 실행되며 콘솔창에 123이 뜨게 된다