[React] HOF / HOC

HOF

High Order Function, 더 높은 순위에 있는 함수, 함수를 리턴하는 함수

aaa가 bbb보다 먼저 실행되기 때문에 더 높은 순위에 있는 함수(HOF)라고 할 수 있다.

//  1. 함수를 리턴하는 함수
// function aaa() {
//   const apple = 10;

//   return function bbb() {
//     const banana = 20;
//     console.log(banana);
//     console.log(apple);
//   };
// }

// aaa();

// // 2. 함수를 리턴하는 함수 - 인자가 있는 경우
// function aaa(apple) {
//   return function (banana) {
//     console.log(banana);
//     console.log(apple);
//   };
// }

// aaa(10)(20);

// // 3. 함수를 리턴하는 함수 - 화살표 함수
// const aaa = (apple) => (banana) => {
//   console.log(banana);
//   console.log(apple);
// };

// aaa(10)(20);

// 4. 함수를 리턴하는 함수 - 인자 3개
const aaa = (apple) => (banana) => (tomato) => {
  console.log(banana);
  console.log(apple);
  console.log(tomato);
};

aaa(10)(20)(30);

HOC

High Order Component , 상위에 있는 컴포넌트로 다른 컴포넌트보다 먼저 실행되는 컴포넌트이다.

HOC는 로그인 검증용으로 많이 사용한다.
로그인 성공 페이지 이전에 HOC로 검증을 먼저 한 후, 로그인 성공 페이지로 이동시킨다.

withAuth 만들기(로그인검증용)

로그인 권한 체크하는 컴포넌트는 어디든 사용될 수 있기 때문에 공통으로 만들어주기

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

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

  // 로그인 체크
  useEffect(() => {
    if (localStorage.getItem("accessToken") === null) {
      alert("로그인 후 이용 가능합니다!");
      void router.push("/23-03-login-check");
    }
  }, []);

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