[React] – HOC (고차

by

React에서 고차 함수에 대해 배운 것

정리하고 싶다

HOC(시간더 높은-영형더씨components)는 컴포넌트 개발을 위한 패턴이며,

구성 요소를 인수로 받아 새 구성 요소로 캐스팅하고 반환하는 함수오전.

다른 사람이 작성한 블로그

공식 문서를 찾고

재미있어 보였다

고도의 기술임을 알 수 있다.

나는 공부했다.

단순히 HOC를 정의하면

상태 관리 로직을 재사용하는 컴포넌트라고 생각하시면 됩니다.

여기에 사용된 논리는

데이터를 수신하고 배포하는 한

아주 간단하게 작성했습니다.

코드를 간단히 살펴보겠습니다.

import React, { ComponentType } from 'react';
import axios from 'axios';
import { useEffect, useState } from 'react';

export interface Props {
  albumId: number;
  id: number;
  thumbnailUrl: string;
  title: string;
  url: string;
}

export interface DataProps {
  data: Props();
}

export const withHoc =
  (WrappedComponents: ComponentType<DataProps>) => () => {
    const (data, setData) = useState<Props()>(());
    const (loading, setLoading) = useState(true);

    useEffect(() => {
      const dataFetching = async () => {
        const res = await axios.get(
          'https://jsonplaceholder.typicode.com/photos'
        );
        setData(res.data.slice(0, 20));
        setLoading(false);
      };
      dataFetching();
    }, ());
    console.log(data);

    if (loading) return null;
    return <WrappedComponents data={data} />;
  };

export default withHoc;

우선 부모 함수의 컴포넌트 이름 앞에 with를 붙이는 것이 일반적이다.

https://jsonplaceholder.typicode.com/photos

위의 주소는 컬러 흑백 이미지를 수신하기 위한 것입니다.

오픈 API 주소입니다.

위의 withHoc 구성 요소를 고려하십시오.

이는 WrappedComponents를 인수로 사용하며 해당 인수의 유형은 다음과 같습니다.

컴포넌트 자체이므로 ComponentType을 사용하여 유형을 지정합니다.

두 가지 화살표 기능이 있습니다.

첫 번째 화살표의 계수

WrappedComponents 뒤의 화살표는

그런 다음 빈 매개변수를 사용하십시오.

함수 자체를 반환

(반환 기능!)

빈 매개변수 뒤의 화살표

그 후 모든 논리가 반환됩니다.

두 개의 화살표 기능을 중첩하는 것으로 생각하십시오.

논리는 간단하다

1. 데이터를 수신하여 데이터라는 상태에 넣습니다.

2. 데이터를 받기 전까지는 load가 true이므로 null이 리턴된다.

마지막 줄

    return <WrappedComponents data={data} />;

래핑된 구성 요소

(이름은 첫 글자를 대문자로 하여 지을 수 있습니다.)

data라는 상태는 props로 전달됩니다.

그럼

이제 이 withHoc 구성 요소를 사용하십시오.

구성 요소를 살펴보겠습니다.

import styles from './style.module.scss';
import { DataProps, Props } from '@/app/components/withHoc';
import { withHoc } from '@/app/components/withHoc';

const HomeScreen = (props: DataProps) => {
  const data = props.data;

  return (
    <div className={styles.container}>
      {data.map((detailData: Props) => {
        return (
          <div key={detailData.url} className={styles.itemBox}>
            <img src={detailData.url} className={styles.item}></img>
          </div>
        );
      })}
    </div>
  );
};

export default withHoc(HomeScreen);

해당 데이터의 이미지 URL 가져오기

카드를 뿌린다

withHoc 구성 요소에서

20개의 날짜만 무작위로 지정되었습니다.

여기서 핵심은

마지막 줄에

export default withHoc(HomeScreen);

이 부분

내보낸 withHoc

현재 구성 요소 래핑

withHoc 컴포넌트의 로직을 재사용할 수 있습니다.

이와 같이

HOC(Higher Order Components)에 대해 자세히 알아보세요.

상태 관리 로직 재사용

또 다른 옵션은 사용자 지정 후크를 사용하는 것입니다.

사실 저는 Custom Hooks를 처음 접했습니다.

유용했기 때문에

HOC 연구 중

오히려 코드가 복잡하고 구성 요소가 중첩되어 있습니다.

Custom Hooks보다 더 나은 것을 찾기가 어려웠습니다.

클래스 구성 요소가 먼저 온다

이 경우 로직은 HOC만 사용하여 재사용되었습니다.

반응 16.8 이후

후크는 로직을 재사용하는 것처럼 보입니다.

커스텀 훅이라는 것이 있기 때문에

HOC를 사용자 정의 후크로 대체할 수 있는지 궁금합니다.

그래도 HOC를 배우면서 배운 것은

구성 요소의 유형

화살표 함수 중첩

그리고 그 코드를 작성

또한 간단한 webpack 구성도 함께 제공됩니다.

지금 면접보러 갑니다.

그래도 정말 그리워

더 배워야 한다고 생각합니다.

준비된 자에게 기회는 찾아옵니다.

열심히 하자