HOC, HOF

1.HOC(High Order Component)

HOC,高次素子は,素子を論理として導入し,新しい素子を返す関数である.Reduxなどのライブラリでよく見られます.これはエンクロージャ2n.関数から拡張された概念である.
このHOCでは、権限分岐の概念を適用できます.

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

export const withAuth = (Component) => (props) => {
  const router = useRouter();
  useEffect(() => {
    if (!localStorage.getItem("accessToken")) {
      alert("로그인 후 이용 가능합니다.");
      router.push("/login");
    }
  }, []);
  return <Component {...props} />;
};

accessTokenの状態で登録の有無を確認するwithAuth素子です.(練習コードなのでlocalStorageを使用しました.)

import { withAuth } from "../../src/components/commons/hocs/withAuth";
import BoardList from "../../src/components/units/board/list/list.container";

function BoardListPage() {
  return <BoardList />;
}

export default withAuth(BoardListPage);

その後、withAuthコンポーネントを投稿リストページにカプセル化し、投稿リストページにアクセスすると、ログインしていない場合はログインページ(/login)にアクセスします.

2. HOF(High Order Function)

HOCと同様にCloser関数に拡張された概念である.名称にFがあることから分かるように,return値は素子ではなく関数である.

export default function HofTest() {
  const cats = ["푸딩", "애옹", "춘식"];
  const onClickButton = (el) => (event) => {
    console.log(el);
  };

  return (
    <div>
      {cats.map((el) => (
        <button key={el} onClick={onClickButton(el)}>
          {el}
        </button>
      ))}
    </div>
  );
}

これはHOF機能をテストするために書かれたコードです.
ブラウザで実行すると、各ボタンを押したときのelの値がコンソールに印刷されます.