고차 구성 요소 반응

React에서 Higher Order Component란?

고차 컴포넌트는 컴포넌트를 매개변수로 받아 강화되거나 변경된 컴포넌트를 반환하는 함수입니다. HOC(Higher Order Component)는 원래 구성 요소에 추가 데이터 또는 기능을 추가하고 향상된 버전을 반환합니다.
HOC는 원래 구성 요소를 수정하지 않습니다. 원래 구성 요소를 가져 와서 컨테이너 구성 요소로 래핑합니다. 래핑된 구성 요소는 데이터를 수신하고 수신된 데이터에 따라 출력을 반환합니다. HOC는 순수 함수입니다.

Higher Order Component를 사용하는 이유는 무엇입니까?

HOC는 구성 요소 간에 공통 기능을 공유하는 데 사용됩니다

.

코드 중복을 줄이는 데 도움이 됩니다

.

코드를 관리하기 쉽게 만듭니다

.

예시

버튼을 클릭하고 텍스트 위로 마우스를 가져간 횟수를 세는 간단한 React 애플리케이션을 만들어 봅시다.

React 앱에서 HOC라는 폴더를 만듭니다. HOC 폴더 안에 'withCounter.js'라는 새 파일을 만듭니다. 'withCounter.js'는 Higher Order Component입니다. 'withCounter.js'에는 카운터 시스템을 구축하는 데 필요한 논리가 포함됩니다.

이제 'components'라는 다른 폴더를 만듭니다. 이 폴더 안에 ClickCounter.js라는 구성 요소를 만듭니다.

import React from "react";

class ClickCounter extends React.Component {

  render() {

    return (
      <div>
        <button>Click me</button>
        <p>Clicked X times</p>
      </div>
    );
  }
}

export default ClickCounter;

같은 폴더 안에 HoverCounter.js라는 다른 구성 요소를 만듭니다.

import React from "react";

class HoverCounter extends React.Component {

  render() {

    return (
      <div>
        <h1>Hovered X times</h1>
      </div>
    );
  }
}

export default HoverCounter;

ClickCounter 및 HoverCounter 구성 요소에서 볼 수 있듯이 버튼을 클릭하거나 텍스트 위로 마우스를 가져갈 때마다 하나씩 증가하는 상태를 만들어야 합니다. 이제 이 기능을 구현하는 논리를 작성해 보겠습니다.

 constructor(props) {
            super(props)
            this.state = {
                count:0
            }
        }

        incrementCount = () => {
            this.setState(prevState => {
                return {count: prevState.count + 1}
            })
        }

여기에서 count의 초기 상태는 0으로 설정되고 incrementCount는 count 값을 1씩 증가시킵니다.
이제 구성 요소를 작동시키는 한 가지 방법은 구성 요소에 위의 코드 조각을 추가하고 ClickCounter에서 버튼을 클릭할 때와 HoverCounter에서 마우스를 가져갈 때 incrementCount를 트리거하는 것입니다.
또 다른 방법은 Higher Order Component를 사용하여 count 및 incrementCount를 입력한 다음 ClickCounter 및 HoverCounter에 소품으로 전달할 수 있습니다.
이를 위해 withCounter.js 파일을 열고 코드를 작성해 보겠습니다.

import React from 'react'

const UpdatedComponent = (OriginalComponent) => {
    class NewComponent extends React.Component{
        constructor(props) {
            super(props)
            this.state = {
                count:0
            }
        }

        incrementCount = () => {
            this.setState(prevState => {
                return {count: prevState.count + 1}
            })
        }
        render(){
            return <OriginalComponent count={this.state.count} incrementCount={this.incrementCount } />
        }
    }
    return NewComponent
}

export default UpdatedComponent

이 HOC에서 UpdatedComponent는 OriginalComponent를 매개변수로 사용하는 화살표 함수입니다. 우리의 경우 ClickCounter 및 HoverCounter를 OriginalComponent 매개 변수로 보냅니다.
이 HOC에서는 OriginalComponent의 소품으로 count 및 incrementCount down을 전달합니다. 마지막으로 OriginalComponent의 향상된 버전을 호출할 수 있는 NewComponent를 반환합니다.

이제 ClickCounter 및 HoverCounter를 매개변수로 HOC withCounter.js에 보냅니다.
따라서 ClickCounter.js는 -

import React from "react";

import UpdatedComponent from "../HOC/withCounter";

class ClickCounter extends React.Component {
  render() {
    const { count, incrementCount } = this.props;
    return (
      <div>
        <button onClick={incrementCount}>Click me</button>
        <p>Hovered {count} times</p>
      </div>
    );
  }
}

export default UpdatedComponent(ClickCounter);

그리고 HoverCounter.js는

import React from 'react'
import UpdatedComponent from "../HOC/withCounter";

class HoverCounter extends React.Component  {
  render() {
    const { count, incrementCount } = this.props;
    return (
      <div>
        <h1 onMouseOver={incrementCount}>Hovered {count} times</h1>
      </div>
    );
  }

};

export default UpdatedComponent(HoverCounter);

그리고, 최종 출력은,


이제 이 예제에서는 상태를 공통 부모 구성 요소로 들어 올려 문제를 해결할 수도 있습니다. 그러나 더 큰 응용 프로그램에서 카운터 구성 요소인 ClickCounter.js 및 HoverCounter.js가 분산되어 있으면 리프팅 상태가 올바른 솔루션이 아닙니다. 이와 같은 경우 Higher Order Component를 사용할 수 있습니다.
이것이 Higher Order Component가 작동하는 방식입니다.
감사합니다!!