[React] HOC 고차 컴포넌트

A higher-order component (HOC) is an advanced technique in React for reusing component logic. 
HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature.
Concretely, a higher-order component is a function that takes a component and returns a new component.

HOC는 리액트에서 컴포넌트 로직 재사용을 위해 사용하는 고급 기술입니다. 
HOC는 React API의 일부가 아니며, 단지 리액트의 집합 특성에서 나온 패턴입니다.
정확히 말해, HOC는 어떤 컴포넌트를 사용해 새로운 컴포넌트를 리턴하는 함수입니다.

React를 사용해 개발하다 보면, 특정 데이터에 대한 로딩 부분의 함수가 매우 빈번하게 중복된다.

HOC 만들기

우선 네이밍 룰은 with으로 시작하는게 관행이다

import React, { useEffect, useState } from 'react';

const withArrayLists = WrappedComponent => {

    const Component = props => {

        const [arrList, setArrList] = useState([]);

        useEffect(() => {
            arrList.push(0, 1, 2, 3, 4, 5);
        }, []);

        // if (!arrList) return <Spinner />

        const combineArr = {
            ...props,
            arrList
        }

        return <WrappedComponent {...combineArr} />
    }
    return Component;
}

export default withArrayLists

기본적으로 HOC는 다음과 같은 형태를 갖는다.

맨 윗줄에서 말했듯이, HOC는 어떤 컴포넌트를 가지고 새로운 컴포넌트를 반환하는 함수이기 때문에

withArrayLists는 컴포넌트를 받아, 새로운 컴포넌트를 반환하는 이중 함수의 형태로 되어있다.

 

HOC 사용법

export default ArrayLists에서 를 withArrayLists로 감싸 주면 

withArrayLists가 알아서 ArrayLists를 props로써 패치해준다.
이제 배열 리스트가 필요한 컴포넌트는 같은 useState/useEffect로 도배하지 않고

withArrayLists()로 감싸기만 하면 데이터를 얻어올 수 있다.