클로저함수(Closure FunCtion) / 권한분기
클로저함수(Closure Function)
function 안에서 function 으로 return 하는 함수
function aaa(){
const myAaa = "111"
return function bbb(){
const mybbb = "222"
}
}
myAaa 매개변수
지역함수 : 함수 내부에서 선언된 변수
aaa()
//실행결과
f bbb(){
const myBbb = "222"
}
(aaa())()
//실행결과
111
내부에 있는 함수 (bbb)가 외부에 있는 함수(aaa)에 있는 지역변수에 접근할 수 있다.
=> 이것을 통해 HOC 를 만든다 .
권한분기
사용자 서버 안에서 로그인한 유저 /로그인 안한 유저로 권한을 구분
권한을 구분하는 방법으로 useEffect 에서 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 의 클로저 함수를 이용한다.
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>
}
Author And Source
이 문제에 관하여(클로저함수(Closure FunCtion) / 권한분기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@s2s2hyun/클로저함수Closure-FunCtion-권한분기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)