React HoC

HoC...?
High Order Component 상위컴포넌트 라는 뜻이다. 로그인을 하지 않은 유저가 로그인을 해야만 볼 수 있는 페이지 (예를 들면 마이페이지)에 접근하려면 "로그인을 해주세요"라고 알림이 떠야 한다. 그러한 페이지가 수백 페이지라면...? 각 페이지마다 일일이 코드를 복사, 붙여넣기하는것은 물리적으로 불가능하다. 그래서 HoC를 이용한다!!!

💡HoC의 사용방법 (withAuth 컴포넌트로 분리)

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

💡HoC 페이지 (사용하려는 페이지에서 withAuth로 감싸주기)

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