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



レプリカ関数

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>
    }