レプリカ関数/権限ブランチ
4327 ワード
レプリカ関数
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を作成すると、簡単にパーミッション処理が完了します.
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>
}
Reference
この問題について(レプリカ関数/権限ブランチ), 我々は、より多くの情報をここで見つけました https://velog.io/@s2s2hyun/클로저함수Closure-FunCtion-권한분기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol