권한분기, HOC, HOF

권한분기

권한분기는 말 그대로 권한을 나누는 것이다. 예를 들어 회원/비회원/판매자/관리자 등으로 나눌 수 있겠다.

---

HOC

HOC는 Higher Order Component의 줄임말로 리액트 컴포넌트를 인자로 받아서 새로운 리액트 컴포넌트를 리턴하는 함수이다. HOC는 페이지의 권한을 처리할 때 필수적으로 사용하게 된다. 예를 들어 로그인 후 이용을 할 수 있는 페이지의 경우, 페이지로 이동 시 로그인이 되어있는 상태인지 검증을 하는 컴포넌트가 HOC이다.

HOC의 이름은 관례적으로 ‘with~’라고 만든다. 이제 HOC의 사용방법을 알아보자.

HOC로 권한을 나눠주려는 페이지 : HOC페이지인 withAuth를 import 해준다

import { withAuth } from "../../src/component/commons/hocs/withAuth";
const HocPage = () => {
  return <div>HOC 연습 페이지</div>;
};
export default withAuth(HocPage);

> HOC 페이지
> ``` jsx
import { useRouter } from "next/router"
import { useContext, useEffect } from "react"
import { GlobalContext } from "../../../../pages/_app"
export const withAuth = (Component) => (props) => {
  const router = useRouter()
  const { accessToken } = useContext(GlobalContext)
  useEffect(() => {
    if (!accessToken) {
      alert('로그인이 필요합니다')
      router.push("/23-01-login")
    }
  }, [])
  return <Component {...props} />
}

이렇게 사용을 하게 되면 event.target.id를 사용하지 않아도 된다!

---

HOF

HOF는 HOC와 비슷하며, 최종 return 값이 함수이면 HOF이다.

지금까지 사용했던 방법과 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>;
}

훨씬 간단하고 깔끔하다!