Loading indicator 컴포넌트를 HOC로 만들기

[hellomac87]

loading indicator 컴포넌트는 api를 요청하는 컴포넌트에서 사용한다.
사용의 편의성을 위해 HOC로 만들어야 한다.

예제 코드는 다음과 같다. 쇼핑몰 프로젝트에서 사용했던 HOC 형식 를 가져왔다.

import React from 'react';

export default function withLoading(WrappedComponent) {
  return function WithLoading(props) {
    const { loading, ...rest } = props;
    if (loading) {
      return 'loading...';
    } else {
      return <WrappedComponent {...rest} />;
    }
  };
}

'loading...'문자열이 들어간 부분에 우리가 만든 로딩 인디케이터를 넣으면 된다.

import React from "react";
import Loading from "../components/Loading";

function withLoading(WrappedComponent) {
  return function WithLoading(props) {
    const { loading, ...rest } = props;
    if (loading) {
      return <Loading />;
    } else {
      return <WrappedComponent {...rest} />;
    }
  };
}

export default withLoading;

src/HOC 디렉토리를 만들어 다음과 같이 작성하였다.

class ContainerComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
    // 기본 state 를 true 로 설정한다
      loading: true
    };
  }
  componentDidMount() {
    // api 호출 logic
    this.setState({
        loading: false
      });
  }
  render() {
    const { loading } = this.state;
    // loading 을 view 로 prop으로 내려준다.
    return <RestaurantDetailView loading={loading} {...this.props} />;
  }
}

import withLoading from "../../HOC/withLoading";
//...
export default withLoading(RestaurantDetailView);
// view 컴포넌트를 HOC 로 감싸면 끝