HOF / HOC

권한 분기에 대해서 알아보자.

말그대로 권한을 나눈다라는 뜻이다.
사용자 입장에서 본다면, 사이트는 사용자가 로그인한 상태와 로그인하지 않은 상태에 따라 볼 수 있는 페이지는 달라야한다. 이것도 물론 권한 분기이다.
더 큰 그림을 보면 사용자 말고도 관리자가 있다. 관리자가 볼 수 있는 페이지는 사용자가 볼 수 있는 페이지와는 다르다. 그래서 권한 분기는 프론트엔드에서 페이지네이션을 할 때 꼭 필요한 중요한 기술이되겠다. 이 부분이 가능하려면 로그인했을 때 어떻게 권한을 주는지에 대한 내용이 밑바탕이 되어야 한다. 이는 어제 배운 내용으로 "로그인처리 어떻게 하셨어요?" 라는 포스팅으로 따로 얘기하겠다.

HOC란?

Higer Order Component 상위 컴포넌트 라는 뜻이다. 로그인을 하지 않은 유저가 로그인을 해야 볼 수 있는 페이지에 접근하려면 "로그인을 해주세요 하고 로그인창으로 보내는 페이지를 로그인이 필요한 모든 페이지에 처리해야한다고 가정해보자. 그런 페이지가 백 개라면 코드를 복사하여 붙여넣기를 백 번 하면 될까?
당연히 아니죠. 우리는 HOC를 하나 만들어서 이 문제를 해결할 것입니다.
HOC를 하나 만들고 로그인이 필요한 컴포넌트 앞에 HOC만 붙여주면 간단하게 권한 처리를 끝낼 수 있습니다.

HOC의 특징
1. 데이터를 클로저 함수의 특징을 이용해 무손실로 전달할 수 있습니다. 따라서 event.target.id 등을 이용하지 않고도 바로 함수에서 전달받은 index값을 전달하여 출력할 수 있었습니다.
2. 따라서 id를 남용하지 않아도 되며 id남용으로 인한 예기치 못한 오류를 방지할 수 있습니다.
이렇게 너무너무 좋은데, 빨리 어떻게 쓰는지 알려주세요. 현기증 난단 말이에요~~~

HOC의 사용방법
사용하려는 페이지에서

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

HOC 페이지

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

여기서 사용한 withAuth함수는 화살표 함수로서 안에 무명의 클로저 함수 가 하나 더 있다고 보면 된다. 이렇게 하는 이유는 자바스크립트의 클로저 함수의 스코프 특성을 이용하여 데이터를 손실없이 전달하기 위해서이다.

function withAuth(Component) {
  return function(props) {
    return AAA 
  }
}

사실상 이런 형태라고 보면 된다. props를 {...props}이렇게 객체 안에 스프레드로 저장하면 받을 때도 Props로 받으면 되서 컴포넌트를 거친다고 props.props 이렇게 받을 필요가 없다. 깃똥차다.

HOC와 HOF
함수의 return에 JSX(Html+JS)요소가 있으면 component, 없으면 fu nction이라고 했다. HOC이든 HOF이든 항상 다른 컴포넌트와 함께 사용되므로 이름을 지을때는 with를 앞에 붙인다. e.g. withAuth, withApollo