-hoc

React - boilerplate

hoc에 대해서

Posted by Yan on February 9, 2021

폴더 구조

src
- _actions : redux를 위한 폴더
- _reducer : redux를 위한 폴더
- components : page를 넣는 폴더
  - views
    - Navbar, RegisterPage, LandingPage, LoginPage, Footer
      - Navbar.js, RegisterPage.js 등등
      - Sections : 해당 페이지에 관련된 css파일과 component를 넣음
  - App.js : Routing관련 일 처리
  - Config.js: 환경 변수 같은 것들을 정하는 곳
- hoc : Higher Order Components
- utils : 여러 곳에서 쓸 수 있는 것들을 넣어서 어디서든 쓸 수 있게 만듦

hoc란?

function의 일종으로, 다른 component를 내부에 가짐
예) Auth (자격을 체크하는 것) 내부에 관리자만 접근할 수 있는 Admin Component를 가짐
- 해당 유저가 페이지에 들어갈 자격이 되는지 알아낸 후에 Admin에 접근하도록 함