[HOC] about HOC(Higher Order Component)

1. HOC 란 ?

Higher Order Component의 약자로, 다른 컴포넌트를 받아서 새로운 컴포넌트를 반환하는 함수이다.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

 

 

2. HOC을 쓰는 방법

말로 하기보다 예시가 더 이해가 잘 될 것 같다. 아래는 인증 과정에서 HOC의 쓰임에 대한 예시다.

로그인한 user는 로그인/회원가입 페이지에 들어갈 수 없고, 일반 user는 admin 페이지에 들어갈 수 없다. 이게 가능하려면 일단 각 페이지에 들어갈 때마다 user의 상태, 역할을 서버로부터 받아와야 한다. 서로 다른 컴포넌트들이 user의 상태, 역할을 얻는 공통적인 작업을 수행하는 것은 비효율적이다. 그래서 그 작업을 수행하는 HOC을 만든다. HOC은 다른 컴포넌트들을 생성한다.

예를 들어 아래처럼 생긴 HOC가 있다고 하자. (* HOC는 with로 시작하는 컨벤션이 있다.)

import { LoginPage } from './views/LoginPage'

export function withLogined(InputComponent) {
  return () => {
    const { isLogined } = getUserInfo().loginState;
    return isLogined ? <InputComponent /> : <LoginPage>;    // 컴포넌트를 반환
  };
}

InputComponent는 user가 로그인했는지 체크한 다음 로그인 여부에 따라 InputComponent나 LoginPage로 보낸다. withLogined(LikePage)나 withLogined(CommentPage) 등 로그인 여부부터 체크해야 하는 페이지(=Component)가 있는 경우 이 HOC을 사용할 수 있다.

 

 

3. HOC의 단점

• withBlahBlah(withBlah(withLogined(LikePage)))와 같이 depth가 깊어지는 경우, 가독성도 구리고 이해하기도 어렵다. 어떤 인자가 어디로 들어가서 어디로 나오고 반환되는 컴포넌트가 무엇인지 알기가 힘들다.
• HOC의 props와 inner props의 이름이 서로 겹친다.

HOC은 class형 컴포넌트를 주로 사용할 적에 쓰던 것이고, 함수형 컴포넌트를 주로 사용하는 요즘에는 Hooks으로 HOC을 대체할 수 있다. Hooks는 HOC의 단점을 커버하기도 한다.

 

 

참고한 글: https://ostarblog.tistory.com/12