HOC?

HOC는 컴포넌트의 props로 컴포넌트를 받아 새로운 컴포넌트를 생성하는것이다.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

로딩시간 2초 후 컴포넌트를 생성하는 HOC 예시

withLoading.jsx (2초동안 로딩하게 해주는 컴포넌트)

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

export default function withLoading(Component) {
  const WithLoadingComponent = props => {
    const [loading, setLoading] = useState(true)

    useEffect(() => {
      const timer = setTimeout(() => setLoading(false), 2000)

      return () => clearTimeout(timer)
    }, [])
    return loading ? <p>loading...</p> : <Component {...props} />
  }

  return WithLoadingComponent
}

Input과 Button에 로딩 적용하기

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

function Input() {
  return <input defaultValue="input" />
}

export default withLoading(Input)

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

function Button() {
  return <button>button</button>
}

export default withLoading(Button)