[コードキャンプ5週目]反応HOC VS HOF

[HOF]

HOFは高次関数です.高次関数は、関数を因数として取り、新しい関数を返す関数です.
JavaScriptの関数は1レベルのオブジェクトです.一級オブジェクトとは?関数は変数としても、パラメータとしても、戻ることもできるので、JavaScriptでは関数は1レベルのオブジェクトです.
HOFはこの一級オブジェクトの特性を利用して用いられる関数である.
HOFは高受注機能の略です.
簡単な例を見てみましょう.

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はjavascriptのHOFから入手した反応器のみの高度な技術である.
これは、単独の反応器において機能をサポートするものではなく、反応器素子の特性を発揮してHOFに類似した技術を実現させるものである.
HOFと変わらない
HOCは高次コンポーネントの略です.
すなわち、高次素子と呼ばれる.
簡単な素子で高次素子を作ります.

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

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

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

export default HOC

まずHOCで1つの素子をパラメータとして受け入れ,propsも一緒に受け入れる.
そして、HOC関数の実行時には、まずUSEffectを実行し、ログイン検証機能を実装するコンソールを優先的に印刷する.

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

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

export default HOC(AppComponent);

その後、exportでHOCを実行し、パラメータとしてAppComponentを一緒に送信します.これにより、AppComponentがレンダリングされると、HOCが一緒に実行されると、ログイン検証機能が優先的に出力され、AppComponentの内容がレンダリングされます.
これにより、UseEffectを使用して各コンポーネントを個別に検証することなく、ログイン検証機能をUseEffectとして共有できます.