고차 컴포넌트

1. 고차 컴포넌트(HOC, High Order Component)

고차 컴포넌트는 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수이다.

컴포넌트의 재사용성을 위해 사용한다.

다음과 같이 HOC 컴포넌트의 파라미터로 래핑될 컴포넌트를 넣어서 사용한다.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

• highOrderComponent : HOC
• WrappedComponent : 래핑될 컴포넌트

1. 함수 컴포넌트에서 HOC 사용하기

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), 3000);
      return () =>  clearTimeout(timer);
    },[]);
    return loading ? <p>Loading...</p> : <Component {...props} />;
  };
   return WithLoadingComponent;
}  

Input.jsx

import React from "react";
import withLoading from "./withLoading";

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

export default withLoading(Button);

input.jsx

import React from "react";
import withLoading from "./withLoading";

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

export default withLoading(Input);

App.jsx

	funtion App(){
      return (
        <Input />
        <br/>
        <br/>
        <Button />
     ) 
    }