권한분기

권한분기란 서버 안에서 권한을 구분하여 페이지를 보여주는 것이다.
예를들면 로그인한 유저만 이용가능한 페이지가 있을 수 있다. 로그인된 유저만 게시물을 작성하고 수정할 수 있어야하며, 로그인이 안되어 있는 경우 로그인하고 이용할 수 있도록 로그인 페이지로 이동시켜줘야한다. 또한 관리자와 사용자가 보는 페이지가 달라야하고 기능사용에 대한 권한도 달라야 한다. 이런 경우 사용자의 권한에 맞게 페이지를 보여주는 것을 권한분기라한다.

이래의 코드는 로그인 토큰이 존재하는지 확인하는 코드이다. 로그인이 되었는지 확인해야하는 페이지에 아래와 같은 코드를 작성해줘야한다. 그런데 만일 로그인이 되었는지 확인해야하는 페이지가 30개가 넘는다면 우리는 같은 코드를 30번 작성해줘야 할 것이다. 이러한 불편함을 해결하기 위해 우리는 HOC를 사용할 수 있다.

const router = useRouter();
  useEffect(() => {
    if (!localStorage.getItem("accessToken")) {
      alert("로그인 후 이용 가능합니다.");
      router.push("/23/04-login-check");
    }
  }, []);

HOC에 대해 알아보기 전 고차함수 HOF에 대해 알아보고 가자.

HOF(Higther-Order Function)

고차함수는 다른 함수를 전달인자로 받거나 함수실행의 결과를 함수로 반환하는 함수이다. 고차함수의 사용 예시로 map, filter, reduce등이 있다.

예제1

function aaa(func, num) {
  console.log(func(num));
}

function Squared(num) {
  return num *2;
}

aaa(Squared, 5); // 결과 값 10

위의 예제에서 Squared 함수는 aaa라는 함수의 인자로 전달된다 이러한 함수를 콜백함수라 한다.

예제2

고차함수(map)사용하지 않고 배열의 요소에 x2

const arr = [1, 2, 3];
const duble_arr = [];

for(let i=0; i<arr.length; i++) {
  duble_arr.push(arr[i] * 2);
}

// prints [2, 4, 6]
console.log(duble_arr);

고차함수(map)사용하여 배열의 요소에 x2

const arr = [1, 2, 3];
const duble_arr = arr.map(item => item * 2);
console.log(duble_arr);

HOC

HOC 고차 컴포넌트는 컴포넌트를 인자로 받아 새 컴포넌트로 반환하는 함수며, 컴포넌트 로직을 재활용하기 위해 사용된다.
HOC는 상위에 있는 컴포넌트를 말한다. 쉽게 말해 다른 컴포넌트들보다 먼저 실행되는 컴포넌트라고 생각하면 된다.

따라서 우리는 반복되는 로직(로그인 정보를 확인하여 권한분기)을 HOC에 넣어두고, 다른 컴포넌트를 Wrapping하는 방식으로 활용할 수 있다.

예제

withAuth라는 로그인 토큰이 있는지 검증하는 컴포넌트를 게시글을 수정하는 컴포넌트에 Wrapping시켜 로그인 여부를 먼저 확인한 후에 게시글 수정 페이지를 보여주게된다.

function BoardWriteEditPage() {
  const router = useRouter();

  const { data } = useQuery(FETCH_BOARD, {
    variables: { boardId: router.query.number },
  });

  return (
    <>
      <BoardWriteFunction isEdit={true} boardData={data} />
    </>
  );
}
export default withAuth(BoardWriteEditPage); //컴포넌트 Wrapping