Higher Order Component

Contents

• Introduction
• Connect, Higher Order Component
• File Structure
• Overview for Building a HOC

Introduction

Higher Order Component는 React 컴포넌트이며, 앱 제작 시 재사용되는 코드를 줄일 수 있습니다. 만약 여러분이 리액트 앱을 제작하다, 컴포넌트 간 코드를 복사 / 붙여넣기 하는 경우 Higher Order Component를 사용하기 좋은 케이스라고 할 수 있습니다. HOC는 중복되는 코드를 줄여주고, 코드의 재사용성을 높여줍니다. 일반적으로 HOC를 사용하는 흐름은, React 컴포넌트를 Higher Order Component와 결합한 후 어떠한 로직이나 다른 컴포넌트와 결합한 후 기능이 더 풍부해진 컴포넌트를 생성합니다.

Connect, Higher Order Component

만약 여러분이 아직 HOC에 대해서 잘 모르지만, Redux를 사용해 봤다면 아마 HOC를 인지하지 못 했지만 사용해 봤을 것입니다. Redux에서 store와 컴포넌트를 연결해 주는 connect 함수가 바로 Higher Order Component입니다. connect function을 사용하지않고 컴포넌트에서 직접 코드를 작성해 store의 데이터에 접근을 할 수도 있을 것입니다. 하지만 같은 코드를 또다른 컴포넌트에서도 사용하기 때문에 우리는 Redux 라이브러리에서 제공해주는 connect 함수를 이용합니다.