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

고차컴포넌트란 ?

 

컴포넌트 로직을 재사용하기 위한 React의 고급 기술이다.

고차 컴포넌트(HOC)는 React API의 일부가 아니며, React의 구성적 특성에서 나오는 패턴.

 

구체적으로, 고차 컴포넌트는 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수

const EnhancedComponent = higherOrderComponent(WrappedComponent);

 

컴포넌트는 props를 UI로 변환하는 반면에, 고차 컴포넌트는 컴포넌트를 새로운 컴포넌트로 변환한다.

 

 

 

예제

 

 

[App.js]

import "./App.css";
import Button from "./components/3.7 HOC/Button";
import Input from "./components/3.7 HOC/Input";

function App() {
  return (
    <div className="App">
      <Input />
      <Button />
    </div>
  );
}

export default App;

 

[Input.js]

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

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

export default withLoading(Input);

 

[Button.js]

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

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

export default withLoading(Button);

 

button컴포넌트와 input컴포넌트는 일반적으로 button과 input을 리턴하는 구조이다.

여기서는 아직 input이나 button이 호출되지는 않는다.

마지막 라인에 withLoading함수를 호출하면서자기 자신의 컴포넌트를 인자로 넣어준 것을 볼 수 있다.

 

 

 

[withLoading.js]

import React, { useEffect, useState } 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;
}

withLoading 함수는 component(Input,Button)를 인자로 받으면서 인자로 받은 컴포넌트를 return해준다. 

 

 return loading ? <p>...Loading</p> : <Component {...props} />;

Input컴포넌트와 Button컴포넌트는 여기서 호출이되어 실행되는 것으로 이해하면 될 듯하다.

 

리액트를 사용하면서 재사용되는 훅이 많아 커스텀 훅을 사용하듯이 고차컴포넌트 또한 재사용되는 컴포넌트 로직이 많아 사용한다고 이해하고 있다.

 

 

결과