[리액트] HOC 컴포넌트를 만들어보자 #2 (feat.타입스크립트)

2021.06.14 - [개발/리액트] - [리액트] HOC 컴포넌트를 만들어보자 #1 (feat.타입스크립트)

[리액트] HOC 컴포넌트를 만들어보자 #1 (feat.타입스크립트)

이전글에서 HOC의 경우 하나의 인자만을 받는 것이 규칙이라고 언급하며 리펙토링이 필요함을 말씀드렸습니다.

이번 포스트에서는 말씀드린대로 규칙에 맡게 리펙토링해보도록 하겠습니다.

---

리펙토링 방법은 아주 간단합니다. 커링함수의 기본 개념을 통해 한번더 감싸주면 되는 것입니다.

//기존 커링함수
const withLoading = <P extends object>(Component: React.ComponentType<P>) =>
  class WithLoading extends React.Component<P & WithLoadingProps> {
    render() {
      const { loading, text, ...props } = this.props;
      return loading ? <LoadingProgress height={"100%"} description={text} /> : <Component {...(props as P)} />;
    }
  };

---

 

// 변경된 커링함수
const withLoading =
  (loadingMessage = "Loading...") =>
  <P extends object>(Component: React.ComponentType<P>) =>
    class WithLoading extends React.Component<P & WithLoadingProps> {
      render() {
        const { loading, ...props } = this.props;
        return loading ? <LoadingProgress height={"100%"} description={loadingMessage} /> : <Component {...(props as P)} />;
      }
    };

아무것도 안들어올 경우 Loading...를 기본값으로 삼아 컴포넌트를 랜더링합니다.

---

변경된 사용법

//기존
const CurrentSelectedPFWithLoading = WithLoading(CurrentSelectedPF);
<CurrentSelectedPFWithLoading loading={loading} text={"포트폴리오 적용중..."} selectedPF={selectedPF} />

//변경
const CurrentSelectedPFWithLoading = WithLoading("포트폴리오 적용중...")(CurrentSelectedPF);
<CurrentSelectedPFWithLoading loading={loading} selectedPF={selectedPF} />

text의 경우 HOC를 선언할때 넣어주게 되었고, 이제 HOC 규칙에 맞도록 하나의 인자(loading)만 넘겨주게 되었습니다. 

보시다시피 구현자체는 어렵지않습니다. 다만 커링함수의 개념, 사용법등을 익히고 있어야 HOC를 규칙에 맞게 구현할수 있습니다.