이 블로그 게시물에서는 상위 구성 요소(ListBox)가 하위 구성 요소(AlertComponent) 소품과 콜백을 사용합니다.

이는 상태를 유지하거나 작업을 트리거하기 위해 하위 구성 요소가 상위 구성 요소와 다시 통신하도록 하려는 경우 React에서 유용합니다.

이 예를 통해 이해해 봅시다:

• 항목 목록을 표시하는 ListBox 구성 요소가 있습니다. 사용자가 항목을 길게 누르면 사용자가 항목을 삭제할지 여부를 묻는 경고 대화 상자가 나타납니다.

상호작용 분석은 다음과 같습니다.

1. ListBox(상위)는 항목을 렌더링하고 필요한 props와 콜백을 AlertComponent(하위)에 전달합니다.

import React, { useState } from 'react';
import AlertComponent from './AlertComponent';

const ListBox = () => {
  const [showComponent, setShowComponent] = useState(false);

  const alertAction = async () => {
    setShowComponent(!showComponent);
  };

  return (
    

      

        
Item 1
        {/* Other list items */}
      

      {/* Passing props to the child component */}
       {
          alert('Item Deleted');
          setShowComponent(false);
        }}
        onCancel={() => setShowComponent(false)}
        showComponent={alertAction}

      />
    
  );
};

export default ListBox;

1. AlertComponent는 제목, 설명, onAccept, onCancel 등의 콜백과 상태 변경 소품인 showComponent.

export const AlertComponent: = ({ title, description, 
onAccept, onCancel, showComponent }) => {
return (
... rest of the code
)
}

1. 상위 구성 요소는 대화 상자의 가시성을 관리해야 하며, 하위 구성 요소는 이 가시성을 전환하기 위해 콜백을 통해 이벤트를 내보내 상위 구성 요소와 상호 작용합니다.

showComponent는 AlertComponent

거부를 누를 때마다 이 콜백은 showComponent의 현재 상태를 전환합니다.

 {
          alert('Item Deleted');
          setShowComponent(false);
        }}
        onCancel={() => setShowComponent(false)}
        showComponent={alertAction}
      />

이러한 방식으로 props 및 콜백을 사용하면 React의 상위 구성 요소와 하위 구성 요소 간의 데이터 흐름이 명확해집니다.

부모는 상태를 제어하고 이를 자식에게 전달할 수 있으며, 자식은 콜백을 통해 다시 통신하여 사용자가 수행한 변경 사항이나 작업을 부모에게 알릴 수 있습니다.

이는 사용자 상호 작용에 대한 응답으로 경고, 모달 또는 팝업 표시와 같은 시나리오에 특히 유용합니다.

계속 구축하세요!