レプリカ関数/権限ブランチ

レプリカ関数

functionからfunctionを返す関数

function aaa(){
		const myAaa = "111"

		return function bbb(){

			const mybbb = "222"
		}
}

myaaaパラメータ
ゾーン関数:関数で宣言された変数

aaa()
//실행결과 
f bbb(){
		const myBbb = "222"
}

(aaa())()
//실행결과
111

内部関数(bbb)は、外部関数(aaa)の領域変数にアクセスすることができる.
=>これによりHOCが作成されます.
権限分岐
ユーザサーバ内でログインしているユーザ/ログインしていないユーザに権限を分ける
アクセス権分割の方法を使用して、ユーザーEffectにaccessTokenがない場合は、ページを「/login」画面に移動します.

// @ts-ignore
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("/example/hoc/login");
        }
    }, []);

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

権限区分を行うには、ログイン権限を付与するページに上記の論理を入力する必要があるというトラブルがあります.
そのため、HOCを使用してこの問題を解決する必要があります.
HOC ( Higher order Component)
これは、特定の構成部品を実行する前に親構成部品を実行する方法です.
JavaScriptのCloser関数を使用します.
登録が必要なコンポーネントにHOCを付けるHOCを作成すると、簡単にパーミッション処理が完了します.

は他の素子とともに動作する高次素子であり、名称の前にwithを付ける
Ex) withAuth , withApollo

// 클로저 개념 
// 외부함수에서 받은 Component 라는 변수는 내부 함수에서 사용

const withAuth = (Component) => (props) => {
	const router = useRouter();
	const {	accessToken	} = useContext(GlobalContext); 
    
    // 토큰체크 
    useEffect(() => {
		if (!accessToken) router.push("/login");
        return <Component {...props} />'
	};
}

        export default withAuth;
        const UserPage = (props) => {
            return <div>회원 페이지 입니다.</div>;
        }
        export default withAuth(UserPage);

#### HOC 장점

1. event.target.id 를 사용하지 않아 코드가 간략해진다.
2. material-ui, ant-design 등의 컴포넌트를 이용하면 id값이 날라가는 현상을 막을 수 있다.
3. id 는 전체 태그에서 고유해야하기 때문에 , id 가 남용되면 대규모 서비스에서 문제가 야기 될수 있지만 이를 방지 할수 있다 .
기존방법

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

}

//HOF 적용

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