Higher Order Component Pattern (with React)

📌 목록

• HOC 란?
• 간단한 HOC 구현
• JSON Placeholder 데이터로 withLoader 만들기
• HOC의 장점과 단점

📌 HOC 란?

High Order Component는 공통 로직을 재사용 해서 사용하게 끔 만들어 줍니다. 마치 mixin과 같이요. 하지만 어떤 컴포넌트를 한번 감싸서 컴포넌트를 만들게 합니다. 그럼 한번 어떤 녀석인지 볼까요?

📌 간단한 HOC 구현

먼저 이런 withStyle 함수를 한번 정의해볼게요.

const withStyle = (Component) => {
  return props => {
    return <Component style={{ color: 'red', border: 'solid 1px blue', }} {...props} />
  }
}

그리고 버튼과 Text를 만들어 보겠습니다.

import withStyle from "./hoc/withStyles";

const Button = ({ style, children }) => <button style={style}>{ children }</button>;

const StyledButton = withStyle(Button);

export default StyledButton;

import withStyle from "./hoc/withStyles";

const Text = ({ style, children }) => <p style={style}>{ children }</p>

const StyledText = withStyle(Text);

export default StyledText;

이처럼 한번 감싸주는 형태로 로직을 재사용할 수 있습니다.

📌 JSON Placehodler 데이터로 withLoader 만들기

그렇다면 이번엔 한번 data fetch에 관련한 아이를 만들어 볼까요?
여기서는 JSONPlaceholder를 사용하였습니다.

먼저 ApiService 객체를 하나 만들어 줄게요.

import axios from 'axios';

const ApiService = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com/',
  timeout: 1000,
});

ApiService.interceptors.response.use(
  (response) => response.data, 
  (error) => Promise.reject(error)
);

export default ApiService;

그리고 이걸 withLoader에 적용시켜 보겠습니다.

import { useState, useEffect, useCallback } from 'react';
import ApiService from '../../services';

const withLoader = (Component, url) => {
  return (props) => {
    const [data, setData] = useState();
    const [loading, setLoading] = useState(false);

    const fetchData = useCallback(async () => {
      setLoading(true);
      setData(await ApiService.get(url));
      setLoading(false);
    }, []);

    useEffect(() => {
      fetchData();
    } , [fetchData]);

    if (loading) return <div style={{ fontSize: '200px' }}>Loading...</div>
    else return <Component  {...props} data={data} fetchData={fetchData} />
  }
}

export default withLoader;

이제 이걸 Todo에 한번 연결을 해볼까요?

import { useMemo } from "react";
import withLoader from "./hoc/withLoader";

const Todo = ({ todo }) => {
  const title = useMemo(() => todo?.title ?? "", [todo]);
  const completed = useMemo(() => todo?.completed ?? false, [todo]);

  return (
    <li>
      <span style={{ textDecoration: "bold", marginRight: "4px" }}>
        {title}
      </span>
      <input type="checkbox" checked={completed} onChange={() => {}} />
    </li>
  );
};

const Todos = ({ data, fetchData }) => {
  return (
    <section style={{ marginTop: '20px' }}>
      <button onClick={fetchData}>Refecth Data</button>
      <ul>
        {data?.map((todo) => (
          <Todo key={todo.id} todo={todo} />
        ))}
      </ul>
    </section>
  );
};

export default withLoader(Todos, "todos");

📌 HOC의 장점과 단점

장점

• 로직 재사용을 할 수 있다.

단점

• HOC는 중첩이 가능한데 depth가 깊어지면 찾아다니기가 힘들다.