권한분기, Closure, HOC, HOF

권한분기

사이트마다 관리자 페이지,
배민 같은 경우는 사장님용 페이지,
카카오택시같은 경우는 기사님용 페이지가 따로 있다.
페이지별로 로그인 한 사람에 따라 권한을 분리해 줄 수 있다.

Closure

내부 함수에서 외부 함수의 지역변수에 접근하는 것을 의미

function aaa(){
  let apple = "이건 사과" 
  // 이 영역이 Closure: 내부 함수에서 지역변수에 접근할 수 있다.
  return function bbb(){
    let banana = "이건 바나나"
    
    console.log("hi")
    console.log(apple)
    console.log(banana)
  }
}
aaa()()
// 리턴되는 함수의 이름은 중요하지 않다.

HOC(Higher Order Component)

페이지 권한을 처리할 때 사용
회원공개 페이지가 실행되기 전, withAuth라는 상위 컴포넌트를 먼저 실행

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

export default withAuth(UserPage);

withAuth HOC 컴포넌트

const withAuth = (Component) => (props) => {
  const router = useRouter();
  const { accessToken } = useContext(GlobalContext);

  // 토큰체크
  useEffect(() => {
    if (!accessToken) router.push("/login");
  }, []);

  if (!accessToken) return <></>;
  return <Component {...props} />;
};

export default withAuth;

외부 함수에서 받은 Component라는 변수는 내부 함수에서 사용 -> closure

HOF(Higher Order Function)

HOC와 비슷. return 값이 JSX가 아니고 일반함수.

특정 버튼을 클릭했을때 id값을 넘겨주기 위해 event.target.id를 사용했었는데
만약 id가 중복되었을 경우 오작동을 할수가 있다.

이때 HOF를 사용한다.

// 기존의 방법
export default function Aaa(){

	const onClickButton = (event) => {
		console.log(event.target.id)
	}

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