HOC/HOF

최창서·2022년 4월 15일
0

Aaa 컴포넌트에 Bbb 컴포넌트를 import 시키고있다. Bbb 컴포넌트에서는 props로 "철수"를 내려받고 있다.

함수형으로 이름을 바꾸고 props 또한 변수 이름이기 때문에 어떤 걸로 바뀌어도 상관없다.

Closure에 의해 Bbb 컴포넌트가 실행되기 전에 Hoc의 컴포넌트가 먼저 실행된다. 권한분기가 필요한 페이지에 권한분기체크로직 useEffect를 사용해주게 되면 페이지가 랜더링되기전에 실행할 수 있다.

최종적으로 아래와 같이 바꿔줄 수 있다. export default는 어떤 이름을 사용해도 상관없으니 Aaa 컴포넌트에 Hoc(Bbb)가 아닌 다른 이름을 사용해도되고 먼저 실행 컴포넌트에서는 화살표 함수로 바꿔주게 되면 훨씬 간단하다. 보통 Hoc 앞에 with를 많이 붙이고 로그인 검증에 사용되면 withAuth라는 단어를 많이 붙인다.

profile
프론트엔드 개발자

0개의 댓글