22. React HOC 와 HOF

HOF(High Order Function : 함수를 리턴하는 함수)

HOF는 위에서 적혀있듯 함수를 리턴하는 함수로 사용 예시는 아래의 예시 코드와 같다.

 

HOC(High Order Component : 컴포넌트를 리턴하는 컴포넌트)

위의 HOF의 원리와 컴포넌트도 함수라는 것을 이용해서 HOC를 이해할 수 있습니다.

 

사용 예시

위 예시는 권한 분기를 위한 함수인 withAuth를 거쳐 로그인 페이지가 실행되면서 로그인 토큰이 있는지를 확인하여 토큰이 있는 경우에만 페이지를 실행한다.

 

컴포넌트는 JSX 요소를 리턴하는 함수라고 생각하면 된다.