[React] 고차 컴포넌트(HOC)

고차 컴포넌트 (HOC, Higher Order Component)

 

1. 고계함수 (HOF, Higher Order Function)

  이미 많은 사람들이 알고 있겠지만 리액트는 함수형 프로그래밍을 지향한다. 그렇기 때문에 리액트의 컴포넌트는 입력값인 props를 전달받고 ReactElement를 반환하는 함수의 형태를 띄고 있으며 상태 관리 라이브러리인 리덕스는 순수 함수와 불변 스토어를 강조하며 함수형에 가까운 프로그래밍 스타일을 권장한다. 리액트의 HOC 역시 함수형 프로그래밍의 개념 중 하나인 HOF에서 유래하였다.

  HOF는 함수를 인자로 받아서 또 다른 함수를 반환하는 함수를 뜻한다. 함수형 프로그래밍에서는 작은 단위의 범용적 함수를 만든 후 그를 조합하여 재사용가능한 프로그래밍을 구현한다. HOF는 함수형 프로그래밍에서 아주 중요한 역할을 담당하고 있다.

 

 

2. 고차 컴포넌트 (HOC, Higer Order Component)

  고차 컴포넌트는 컴포넌트를 인자로 받아서 또 다른 컴포넌트를 반환하는 함수를 뜻한다. (정확히는 ReactElement를 반환한다.) 컴포넌트를 인자로 받는다는 점에서 props를 받아서 UI를 변화시키는 일반 컴포넌트와는 차이를 가진다. 고차 컴포넌트는 입력받은 컴포넌트를 수정하지도 않고 그를 상속하지도 않는다. 고차 컴포넌트는 원본 컨테이너를 포장(wrap)하고 조합하는 역할을 맡는다.

  고차 컴포넌트는 다음과 같은 목적으로 주로 활용할 수 있다.

• 스토어와 컴포넌트 연결 (ex. react-redux의 connect)
• 생명주기 메소드 주입 (ex. Recompose의 withState)
• state 및 이벤트 핸들러 주입 (ex. Recompose의 lifecycle) 등
• Props 변경 및 주입 (일부 Props는 고정하고 그 외의 Props만 전달받도록 설정도 가능)
• render 함수 확장

→ 본래 생명주기 메소드나 state을 다루는 것은 클래스 컴포넌트에서만 가능한 작업이다. 그러나 HOC를 활용하면 함수형 컴포넌트에서도 해당 기능들을 구현할 수 있다.

 

  고차함수를 활용할 때의 주의사항

• render 메소드 내에서 사용하지 않기

render 메소드가 호출될 때마다 고차함수가 반환하는 컴포넌트가 새로 생성되어 비효율적이다. 따라서 render 함수 내부보다 해당 컴포넌트 정의 자체를 감싸주는 방식이 바람직하다.

 

• ref는 전달하지 않기

React에서 ref는 prop이 아니라 key처럼 특별 취급된다. 따라서 HOC에 ref를 추가하면 wrapping된 내부 컴포넌트가 아닌 컨테이너 컴포넌트의 인스턴스를 표현하게 되어 원하는 방향으로 활용할 수 없다.