High-Order-Component

react 작업중 매번 반복되는 패턴을 마주한다.
data fetch후 useEffect에서 setState를 해준뒤, 화면에 data를 그려주고..
data.length < 1인 경우 loading상태를 띄워주는등..
이를 고차함수로 묶는 react 패턴에 대해 정리해보자

| 여기서 고차함수란?
함수의 형태를 return해주는 함수를 뜻한다.

따라서, 반복되는 로직에 해당되는 Component를 감싸는 고차 함수인 WapperComponent를 만들어

hoc 로직

import { useState, useEffect } from "react";

const WithDataWapper = (WapperComponent: any, url: string) => {
  const Component = (props: any) => {
    const [data, setData] = useState<any[]>([]);

    useEffect(() => {
      const fetchData = async () => {
        const response = await fetch(url);
        const json = await response.json();
        setData(json);
      };

      fetchData();
    }, []);

    if (data.length < 1) return <div>...loading</div>;

    return <WapperComponent data={data} url={url} {...props} />;
  };

  return Component;
};

export default WithDataWapper;

hoc 사용

import WithDataWapper from "./hoc/withData";

const API_URL = "https://jsonplaceholder.typicode.com/albums";

const Album = ({ data }: { data: any[] }) => {
  return (
    <div>
      <h2>Album</h2>

      <div>
        {data.map((d, i) => (
          <div key={i}>{d.title}</div>
        ))}
      </div>
    </div>
  );
};

export default WithDataWapper(Album, API_URL);