React HOC에 대해 알아보자

HOC(Higher-Order-Components)은 컴포넌트를 개발하는 하나의 패턴으로, 컴포넌트를 인자로 받아 새로운 컴포넌트로 변환해 반환하는 함수이다.

 

HOC은 같은 로직을 다수의 컴포넌트에 동일 적용해야할 때 굉장히 유용하게 사용할 수 있다. 예를 들어, 우리가 프로젝트의 상태를 하나의 store에 저장해놓고 사용한다고 했을 때, 컴포넌트에서 store에 접근해 상태값을 꺼내오기 위해서는 상태값을 사용하는 컴포넌트마다 store와 연결시켜주는 코드가 필요하다. 컴포넌트 내부에 매번 작성하기보다 애초에 store와 연결되어있는 컴포넌트를 만들면 좋지 않을까? 엥? 이거 어디서 많이 보지 않았나? 하고 기시감이 든다면, 맞다. 이게 바로 대표적인 HOC, 리덕스의 connect이다.

 

(+ 함수형 컴포넌트가 생기고 hook이 도입된 이후, HOC을 사용하는 경우는 많이 줄어들고 있다. HOC이 보통 클래스형 컴포넌트에서 react life cycle을 고려한 재사용 가능한 로직을 만들기 위해 사용되기 때문인데, 함수형 컴포넌트에서는 거의 대부분 hook으로 대체가 가능하다. 대표적 HOC으로 소개된 connect만 보아해도, useSelector와 useDispatch를 사용하는게 더 코드를 직관적이고 간편하게 만든다.)

 

 

---

 

HOC의 이해를 위해서 간단한 HOC을 만들어보자.

우리는 컴포넌트 렌더 시에 로딩 상태값을 두고, 로딩이 되지 않았다면 로딩 메세지를 보여주고 로딩이 끝났다면 컨텐츠가 담긴 컴포넌트를 보여주고 싶다. 여러개의 컴포넌트에 해당 로직을 적용하고 싶으니 해당 로직을 공통으로 가지고 있는 HOC을 만들자. HOC은 주로 with를 prefix로 지정해 짓기 때문에 withLoading이라는 HOC을 만들었다.

import React from 'react';
import Loading from '../components/Loading';

const withLoading = (WrappedComponent) => props => {
  if (props.isLoading) return <Loading/>
  return <WrappedComponent {...props}/>
}

export default withLoading;

 

만든 HOC을 사용해보자.

핵심적인 내용이니 다시한번 강조하자면, HOC은 컴포넌트를 인자로 받아 새로운 컴포넌트로 변환해 반환하는 함수이다. 함수를 사용하듯, HOC을 사용하기 위해서는 변환하고자 하는 컴포넌트를 인자로 넘겨주면 된다.

import React from 'react';
import withLoading from '../hoc/withLoading'

const ComponentA = props => {
  ...
}

export default withLoading(ComponentA);

 

 

참고 문서

• React docs
• HOC 사용법