<TIL 20.11.08> HOC (Higher-order Component)

HOC란

• HOC는 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 함수이다.
• 컴포넌트 기능 상에서도, 자주 반복되는 코드들이 나타날 수 있다.
• 컴포넌트 로직을 재사용 하기에 용이하다.
• 이름은 "with + 이름" 규칙을 따른다.

원리 (순서)

1. 파라미터로 컴포넌트를 받아온다
2. 함수 내부에서 새 컴포넌트를 만든다. 
3. 해당 컴포넌트 안에서 파라미터로 받아온 컴포넌트를 렌더링
4. 그리고, 자신이 받아온 props 들은 그대로 파라미터로 받아온 컴포넌트에게 다시 주입
5. 필요에 따라 추가 props 도 넣어준다.

기본 형식

const withHOC = WrappedComponent => {
  const newProps = {
    loading: false,
  };
  return props => {
    return <WrappedComponent {...props} {...newProps} />
  }
};

export default withHOC; 

- HOC함수 : withHOC

- 기존의 컴포넌트 : WrappedComponent

- 기존의 컴포넌트에 newProps를 추가한 컴포넌트를 리턴

- HOC함수를 기존 컴포넌트에 감싸서 사용