프로처럼 React 컴포넌트를 Props로 사용하기 위한 단계별 가이드-JS 튜토리얼-php.cn

Step-by-Step Guide to Using React Components as Props Like a Pro

초보자부터 전문가까지: React 컴포넌트를 소품으로 이해하기

React 개발자로서 React 구성 요소를 다른 구성 요소에 prop으로 전달해야 하는 상황에 자주 직면하게 됩니다. 이 기술은 매우 강력할 수 있지만 일반적인 함정을 피하려면 올바른 방법을 이해하는 것이 중요합니다. 이 세부 가이드에서는 기초부터 고급 사용 사례까지 React 구성 요소를 소품으로 사용하는 모범 사례를 살펴보겠습니다.

기본 사항 이해

React에서 구성요소는 문자열, 숫자, 객체 등 다른 데이터 유형과 마찬가지로 props로 전달될 수 있습니다. 이를 통해 애플리케이션의 유연성과 재사용성이 높아집니다.

React 구성 요소를 prop으로 전달하려면 해당 구성 요소를 상위 구성 요소의 prop에 할당한 다음 하위 구성 요소에서 해당 prop을 사용하면 됩니다. 다음은 간단한 예입니다.

// Parent Component
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  return <ChildComponent myComponent={<MyCustomComponent />} />;
};

// Child Component
const ChildComponent = (props) => {
  const MyComponent = props.myComponent;
  return <MyComponent />;
};

// Custom Component
const MyCustomComponent = () => {
  return <div>This is a custom component!</div>;
};

로그인 후 복사

이 예에서 ParentComponent는 사용자 정의 MyCustomComponent를 myComponent prop으로 ChildComponent에 전달합니다. 그런 다음 ChildComponent는 MyComponent 변수를 사용하여 전달된 구성 요소를 렌더링합니다.

동적 구성요소 처리

구성요소를 props로 전달하는 강력한 사용 사례 중 하나는 동적 구성요소를 렌더링하는 기능입니다. 이는 전달되는 구성 요소가 애플리케이션의 일부 조건이나 상태에 따라 변경될 수 있음을 의미합니다.

이 기술을 사용하는 방법의 예는 다음과 같습니다.

// Parent Component
import { useState } from 'react';
import DynamicComponent from './DynamicComponent';

const ParentComponent = () => {
  const [componentType, setComponentType] = useState('A');

  const toggleComponent = () => {
    setComponentType(componentType === 'A' ? 'B' : 'A');
  };

  return (
    <div>
      <button onClick={toggleComponent}>Toggle Component</button>
      <DynamicComponent component={componentType === 'A' ? ComponentA : ComponentB} />
    </div>
  );
};

// Dynamic Component
const DynamicComponent = (props) => {
  const Component = props.component;
  return <Component />;
};

// Custom Components
const ComponentA = () => {
  return <div>This is Component A</div>;
};

const ComponentB = () => {
  return <div>This is Component B</div>;
};

로그인 후 복사

이 예에서 ParentComponent는 DynamicComponent에서 렌더링할 구성 요소를 결정하는 상태 변수 componentType을 유지 관리합니다. "Toggle Component" 버튼을 클릭하면 componentType이 토글되고 DynamicComponent는 수신한 prop에 따라 적절한 구성 요소를 렌더링합니다.

중첩된 구성 요소에 소품 전달

구성 요소를 prop으로 전달할 때 중첩된 구성 요소에 추가 prop을 전달해야 할 수도 있습니다. 필요한 props를 취하고 구성 요소를 반환하는 함수로 구성 요소를 래핑하면 됩니다.

예:

// Parent Component
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  return <ChildComponent myComponent={(props) => <MyCustomComponent {...props} />} />;
};

// Child Component
const ChildComponent = (props) => {
  const MyComponent = props.myComponent;
  return <MyComponent message="Hello, world!" />;
};

// Custom Component
const MyCustomComponent = (props) => {
  return <div>{props.message}</div>;
};

로그인 후 복사

이 예에서 ParentComponent는 myComponent prop으로 함수를 ChildComponent에 전달합니다. 이 함수는 필요한 소품(이 경우 메시지 소품)을 취하고 해당 소품과 함께 MyCustomComponent를 반환합니다.

참조 전달

어떤 경우에는 prop으로 전달되는 구성 요소에 참조를 전달해야 할 수도 있습니다. 이는 ForwardRef 고차 구성요소를 사용하여 달성할 수 있습니다.

예:

// Parent Component
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  return <ChildComponent myComponent={<MyCustomComponent />} />;
};

// Child Component
const ChildComponent = (props) => {
  const MyComponent = props.myComponent;
  return <MyComponent />;
};

// Custom Component
const MyCustomComponent = () => {
  return <div>This is a custom component!</div>;
};

로그인 후 복사

이 예에서 ParentComponent는 ForwardedComponent를 ChildComponent에 prop으로 전달합니다. ChildComponent는 ForwardRef 상위 구성 요소를 사용하여 참조를 ForwardedComponent로 전달합니다. 이를 통해 ParentComponent는 참조에서 focus() 메서드를 호출하여 입력 요소에 초점을 맞출 수 있습니다.

전달된 구성요소 메모하기

구성요소를 prop으로 전달할 때 성능에 미치는 영향을 고려하는 것이 중요합니다. 전달된 컴포넌트를 렌더링하는 데 비용이 많이 드는 경우 React.memo 고차 컴포넌트를 사용하여 메모해 두는 것이 좋습니다.

예:

// Parent Component
import { useState } from 'react';
import DynamicComponent from './DynamicComponent';

const ParentComponent = () => {
  const [componentType, setComponentType] = useState('A');

  const toggleComponent = () => {
    setComponentType(componentType === 'A' ? 'B' : 'A');
  };

  return (
    <div>
      <button onClick={toggleComponent}>Toggle Component</button>
      <DynamicComponent component={componentType === 'A' ? ComponentA : ComponentB} />
    </div>
  );
};

// Dynamic Component
const DynamicComponent = (props) => {
  const Component = props.component;
  return <Component />;
};

// Custom Components
const ComponentA = () => {
  return <div>This is Component A</div>;
};

const ComponentB = () => {
  return <div>This is Component B</div>;
};

로그인 후 복사

이 예에서 ParentComponent는 React.memo 고차 컴포넌트를 사용하여 MyComponent를 메모합니다. 이렇게 하면 Props가 변경될 때만 MyComponent가 다시 렌더링되어 애플리케이션의 전반적인 성능이 향상됩니다.