[Programming] 권한분기(HOC,HOF,클로져)란 무엇인가? 한번 ARABOZA

권한분기 ? 란

작게는 비회원, 회원
크게는 비회원, 구매자, 판매자, 중개관리자 등등 여러가지의 회원 유형이 있을수 있고 해당 회원마다 볼수있는 페이지의 권한이 모두 달라야 한다.
이러한 권한에 따른 페이지 보여주기 및 권한이 없을때 처리해주는 과정이 바로 권한분기 이다.

클로저

HOC, HOF의 개념을 알기전에 먼저 클로저에 대한 개념을 알고 가야한다.

변수의 개념은 2가지가 있는데 전역변수는 컴포넌트 전체 어디에서든 사용할수 있는 변수이며, 지역변수는 함수 안에서 정의된 변수로써 함수 안에서만 사용이 되는 변수이다.

클로저란 내부함수에서 외부함수의 지역변수에 접근하는 것을 의미한다.

function A(){
	const 지역변수 = 123
	return function B(){
		console.log(지역변수)     // 123		
	}
}

HOC

HOC(Higer Order Component)는 페이지의 권한을 처리할때 사용하게 된다.

위에서 설명한 예제코드는 useEffect의 부분에서 if문으로 체크하였는데 해당부분을 withAuth라는 컴포넌트로 분리시킨다.

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;

이렇게 작성후 권한을 확인할 index 페이지에서 다음과같이 작성해주면

import { withAuth } from "../../src/components/commons/hocs/withAuth";
import ProductsListContainer from "../../src/components/units/product/list/ProductsList.container";
const ProductWritePage = () => {
  return <ProductsListContainer />;
};
export default withAuth(ProductWritePage);

페이지가 그려지기전 withAuth가 먼저 실행되어 로그인 여부를 검증해 로그인이 되어있지 않다면 접속을 차단할수 있게 된다.

이런식으로 설정하면 매번 페이지에 if조건을 줄필요 없이 withAuth를 작성하는 부분만으로 페이지 권한분기 작업을 진행할수 있으며 권한이 없을때 이동할 페이지가 변경된다고 해도 withAuth 페이지만 변경하면 되기 때문에 매우 편리하게 사용할수 있다.

HOF

HOF(Higher Order Function)도 HOC와 동일하다. 단지 return값이 jsx가 아니라 일반함수를 의미한다.

버튼을 클릭했을때 id 값을 가져오고, 그 id 값으로 특정한 작업을 할때 event.target.id 이런식으로 작업을 했다.

이 방법의 문제점은 id값은 고유한 값이기 때문에 남발하면 안되고, 중복 작성된경우 오작동이 일어날 가능성이 있다.

HOF를 이용한다면 이러한 문제를 방지할수 있으며, id값을 가져와서 사용할때 프레임워크를 사용할때 발생했던 문제(ant design or Material UI를 사용할때 id값이 사라지는 문제)를 해결할수 있다.

HOF 방법

export default function Bbb(){
	const onClickButton = (id) => (event) => {
		console.log(id)
	}
	return <button onClick={onClickButton(123)}>클릭</button>
}