[Next] Closure / HOC / HOF

권한 분기

로그인 인증이후에는 이에따른 권한 분기가 이루어져요.
아주 작게는 로그인을 한 사람 과 로그인을 하지 않은 사람.

추가적으로 로그인에 등급을 매기면, 운영자로 로그인 한 사람, 판매자로 로그인 한 사람, 거래처 사장님으로 로그인 한 사람 등 다양하게 권한을 분리할 수 있습니다.

사전지식

스택(Stack)

출입구가 하나인 우물 형태의 데이터 구조에요.

스택은 출입구가 하나이기때문에 가장 처음에 입력된 함수가 가장 나중에 스택을 빠져나가게 되요.
이를 우리는 First In Last Out 이라고 하며, 앞글자를 따 FILO라고도해요.

큐(Queue)

양방향 출입이 가능한 파이프 형태의 데이터 구조입니다.

큐는 스택과 다르게 출입구가 나뉘어있어 가장 먼저 입력된 함수가 가장 먼저 빠져나갑니다.
이를 우리는 First In First Out이라고 합니다.

권한 분기에서
class형 컴포넌트에서는 HOC방식만을 사용을 했고
functional형 컴포넌트에서는 custom-hooks(주로 이걸 사용) , HOC(이것도 가능) 이렇게 두가지 모두 사용이 가능해요

Closure와 Scope Chain!

스코프 체인과 클로저 간단 정리

• 클로저(closure) : 상위 함수 + 상위함수의 lexical enviroment(상위함수를 둘러싼 환경)
• 스코프 체인(scope chain) : 바로위 함수 스코프 뿐만아니라 global 스코프 까지 찾아 올라가는 과정을 scope chain이라고 합니다.

Scope Chain

Closure

bbb함수 스코프 안에 apple이라는 변수가 없어 aaa라는 상위함수의 스코프로 찾아 올라가 apple 이라는 변수를 찾게되요.

aaa 함수는 bbb의 closure가 되며 bbb가 apple을 찾아 올라갈 수 있는 이유는 실행컨텍스트가 외부 환경 요소를 수집하기 때문이에요.

커링(Currying) 기법

커링(Currying) 기법은 인자가 여러개인 함수의 일부 인자를 고정시키는 새로운 함수를 만드는 기법입니다.

커링을 사용하는 이유?

• 중복된 코드를 줄여줘요
• 원하는 기능을 적재적소에 조합해서 사용할 수 있어요.
• 실행 시점을 뒤로 미룰 수 있어요

function introduce(word) {
    return function (name) {
        console.log(`${word}, ${name} 입니다.`);
    };
}

const mySelf = introduce("안녕하세요"); 
mySelf("철수"); 	// 안녕하세요, 철수 입니다.
mySelf("영희");  // 안녕하세요, 영희 입니다.

HOF를 작성하는법!

HOF(Higher Order Function)

aaa가 bbb보다 먼저 실행되야하기 떄문에 aaa가 HOF이에요

// 1. 함수를 리턴하는 함수

function aaa() {
  const apple = 10;

  return function bbb() {
    const banana = 20;
    console.log(banana);
    console.log(apple);
  };
}
aaa();
// bbb() {
	const banana = 20;
    console.log(banana);
    console.log(apple);
}

(aaa())()
// 20 
// 10

() 생략가능
aaa()()
// 20
// 10

// 2. 함수를 리턴하는 함수 - 인자

function aaa(apple) {
  return function bbb(banana) {
    console.log(banana);
    console.log(apple);
  };
}
aaa(10)(20);
// 20
// 10

// 3. 함수를 리턴하는 함수 - 화살표함수

const aaa = (apple) => (banana) => {
  console.log(banana);
  console.log(apple);
};

aaa(10)(20);
// 20
// 10

좀 더 줄이기

HOC??

HOC(Higher Order Component) 개념은 위의 클로저로부터 확장된 개념입니다.

HOC는 상위에 있는 컴포넌트로 다른 컴포넌트보다 먼저 실행되는 컴포넌트라고 생각하시면되요

내부에 컴포넌트가 없음에도 불구하고 컴포넌트를 리턴하고 있습니다.
이는 클로저로 외부의 컴포넌트를 가지고 올 수 있기때문에 사용이 가능합니다.

WithAuth

권한을 체크하는 Hoc만들기!

// src/components/commons/hoc/withAuth.tsx 파일

export const withAuth = (Component:any)=>(props:any)=>{
	const router = useRouter()

  // 로그인 체크
	useEffect(()=>{
		if(!localStorage.getItem("accessToken")){
			alert("로그인을 먼저 해주세요")
			void router.push("/로그인 페이지")
		}
	},[])

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

// /page/loginSuccessPage/index.tsx -> withAuth 적용하기 
const LoginSuccessPage = ()=>{
	const {data} = useQuery(FETCH_USER_LOGGED_IN)

	return <div>{data?.fetchUserLoggedIn.name}님 환영합니다.</div>
}

export default withAuth(LoginSuccessPage)

적용하는 방법은 위와같이 필요한 컴포넌트에 withAuth를 감싸서 export를 해주시면되요
이렇게 적용해주시면 해당 컴포넌트가 실행되기 이전에 권한체크 컴포넌트가 먼저 실행되게되요