권한분기 (HOC, HOF)

최권준·2021년 10월 6일

HOC : Higher Order Component

컨테이너와 프리젠터 사이에 새로운 컴포넌트를 추가해 주고 싶을 때
ex) 마이페이지, 상품등록 등등에 로그인이 안되어있을때 검증해주는 새로운 컴포넌트만들기

  • 컨테이너에서 실행하고자 하는 프리젠터 앞에 aaa라는 검증컴포넌트를 추가

  • hoc의 이름은 대게 with~라고 짓는다, 아래의 경우 내가 입력한 Component가 실행된다

  • 컨테이너에서 프리젠터로 보내주던 props가, withAuth가 추가되면서 바로 보낼수 없다.

  • 어쩔 수 없이 컨테이너에서 withAuth로, withAuth에서 프리젠터로 순차적으로 보내줘야 한다. // 스프레드연산자 사용

  • 화살표 함수를 이용해 정리

  • 컨테이너, HOC, 프리젠터 컴포넌트를 전부 분리해서 export import로 사용

return이 없다면 HOF: High Order Function

  • 굉장히 큰 서비스에선 키가 겹칠수 있기때문에 키를 쓰지않는 hof를 사용

0개의 댓글