React의 고차 컴포넌트(HOC)

React의 HOC(고차 컴포넌트)는 컴포넌트를 가져와서 향상된 기능을 갖춘 새 컴포넌트를 반환하는 함수입니다. 이를 통해 코드를 복제하지 않고도 여러 구성 요소에서 논리를 재사용할 수 있습니다.

다음은 HOC의 기본 예입니다.

import React from 'react';

// A Higher-Order Component
function withExtraInfo(WrappedComponent) {
  return function EnhancedComponent(props) {
    return (
      <div>
        <p>This is extra info added by the HOC!</p>
        <WrappedComponent {...props} />
      </div>
    );
  };
}

// A regular component
function MyComponent() {
  return <p>This is my component!</p>;
}

// Wrap the component with the HOC
const EnhancedMyComponent = withExtraInfo(MyComponent);

function App() {
  return <EnhancedMyComponent />;
}

export default App;

HOC에 대한 주요 사항:

• 목적: 구성 요소에 재사용 가능한 논리(예: 로깅, 권한 등)를 추가하는 데 사용됩니다.
• 순수 함수: 원래 구성 요소를 수정하지 않고 새 구성 요소를 반환합니다.
• 일반적인 사용 사례: 승인, 테마 전환, 데이터 가져오기 등

React Hooks가 도입되기 전에 HOC가 더 일반적으로 사용되었지만 여전히 많은 경우에 유용합니다.

위 내용은 React의 고차 컴포넌트(HOC)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!