Heist 전략에서 React State까지: 구성 요소 간 데이터 흐름 방식

코딩을 시작할 때는 주로 구문론을 따라잡으려고 노력했지만 프로젝트가 성장하면 디자인과 데이터 흐름에 대해서도 생각해야 했습니다. 더 이상 작동하지 않는 코딩을 시작하십시오.

이 문제를 더 구체적으로 만들기 위해 React 구성 요소가 구성 요소 간에 데이터를 전달할 수 있는 방법에 대해 논의해 보겠습니다. 재미있게 놀면서 우리 React 앱이 Ocean's Eleven의 숙련된 도둑 그룹이라고 상상해 봅시다(당신이 젊은 Brad Pitt와 George Cloney가 출연한 이 영화를 기억할 만큼 나이가 들었기를 바랍니다). 최근 가석방된 도둑인 주인공 대니 오션(Danny Ocean)은 정교한 강도 사건을 해결하기 위해 숙련된 11명의 범죄자들로 구성된 팀을 구성합니다. 그들의 목표는 무자비한 테리 베네딕트가 소유한 라스베이거스에서 가장 보호받는 카지노 세 곳인 Bellagio, Mirage, MGMGrand를 동시에 강탈하는 것이었습니다. 팀은 영화 역사상 가장 대담한 강도 중 하나를 성공시키기 위해 우여곡절과 아슬아슬한 결정, 영리한 책략에 직면해 있습니다. 그렇다면 React 구성 요소가 비밀리에 통신해야 하는 범죄자라고 가정해 보겠습니다.

PS: 이 영화를 다시 볼 시간이 없어서 줄거리에서 정확히 일치하는 부분을 찾으려고 하기보다는 몇 가지 예를 만들어봤습니다.
PS2: 알겠습니다. 영화가 너무 좋아서 반쯤 봤습니다.

시작하자

1. 콜백을 이용한 데이터 공유

React에서 콜백은 구성 요소 간에, 특히 하위 구성 요소에서 상위 구성 요소로 데이터를 공유하는 일반적인 방법입니다. 이 패턴을 사용하면 데이터가 구성 요소 계층 구조에서 위쪽으로 흐를 수 있습니다.
그래서 러스티(브래드 피트)는 은퇴한 사기꾼 사울 블룸을 찾기 위해 경주에 나가 그에게 강도에 가담하라는 초대장이 담긴 쪽지를 건네준다. 사울은 쪽지를 받고 가기로 결정했습니다.

// Danny (Parent Component)
const SaulBloom = () => {
   const [secretMessage, setSecretMessage] = useState("");
   // Callback to handle the message from Rusty
   const handleRustyMessage = (message) => {
     setSecretMessage(message);
   };
   return (
     <div>
       <h1 id="SaulBloom-Secret-Message-secretMessage">SaulBloom Secret Message: {secretMessage}</h1>
       <rusty sendtodanny="{handleRustyMessage}"></rusty>
     </div>
   );
 };

  // Rusty (Child Component)
 const Rusty = ({ sendToDanny }) => {
   const sendSignal = () => {
     sendToSaul("All clear, move to the vault!"); // Sending secret signal
   };
    return (
     <div>
       <h2 id="Rusty-Sending-Signal">Rusty: Sending Signal</h2>
       <button onclick="{sendSignal}">Send Secret Message</button>
     </div>
   );
 };

2. 상태를 사용하여 데이터 공유

그런데 모든 승무원이 정보를 제공해야 한다면 어떻게 될까요? 강탈 전략의 계획이 공유된 상태라고 가정해 보겠습니다. Danny Ocean과 같은 상위 구성 요소는 계획을 관리합니다. 모든 승무원은 이 정보에 접근할 수 있어야 합니다. 어쩌면 그들은 Danny가 계획을 게시하고 회원들이 이를 읽거나 업데이트한 일부 가석방된 Google 문서를 사용하고 있을 수도 있습니다.
React에서 상태는 구성 요소 내부 및 구성 요소 간에 데이터를 공유하고 관리하는 데 사용됩니다. 상태가 공통 상위 구성 요소로 올라가면 해당 하위 구성 요소에 대한 단일 정보 소스 역할을 하여 데이터를 쉽게 공유할 수 있습니다.

// Danny (Parent Component)
const SaulBloom = () => {
   const [secretMessage, setSecretMessage] = useState("");
   // Callback to handle the message from Rusty
   const handleRustyMessage = (message) => {
     setSecretMessage(message);
   };
   return (
     <div>
       <h1 id="SaulBloom-Secret-Message-secretMessage">SaulBloom Secret Message: {secretMessage}</h1>
       <rusty sendtodanny="{handleRustyMessage}"></rusty>
     </div>
   );
 };

  // Rusty (Child Component)
 const Rusty = ({ sendToDanny }) => {
   const sendSignal = () => {
     sendToSaul("All clear, move to the vault!"); // Sending secret signal
   };
    return (
     <div>
       <h2 id="Rusty-Sending-Signal">Rusty: Sending Signal</h2>
       <button onclick="{sendSignal}">Send Secret Message</button>
     </div>
   );
 };

3. 커스텀 이벤트를 이용한 데이터 공유

계획은 준비되었으며 오션스 일레븐은 카지노를 확인해야 합니다. 하지만 건물 내부에서는 종이 쪽지를 보내는 속도가 너무 느리고 노트북을 사용하는 것이 불편합니다. 그러므로 확실한 징후에 대해 미리 결정해야 합니다. 예를 들어, 계획에서 평판이 좋지 않은 딜러 역할을 맡을 Frank Catto는 Saul이 어떻게 들어오는지 보고 강도가 시작된다는 것을 알게 됩니다.
이 예제는 React의 사용자 정의 이벤트를 보여줍니다. 여기에는 바닐라 JavaScript처럼 내장되어 있지 않습니다. 그러나 EventEmitter 클래스와 같은 도구나 PubSub 또는 EventTarget과 같은 타사 라이브러리를 사용하여 사용자 정의 이벤트 기반 아키텍처를 계속 구현할 수 있습니다. 실제 생활에서는 이 패턴을 사용하는데, 연결해야 하는 구성 요소가 가깝지 않아 소품 드릴링이 의미가 없습니다. 예를 들어, 모듈이 닫힌 후 판매 배너를 표시해야 하는 경우입니다.

오션의 은유 코드는 다음과 같습니다.

function CrewMeeting() {
 const [plan, setPlan] = useState('Rob Bellagio at 11 PM');
 const updatePlan = () => {
   setPlan('Rob Bellagio and MGM Grand at 10 PM');
 };
 return (
   <div>
     <h1 id="Ocean-s-Eleven-Heist-Plan">? Ocean's Eleven Heist Plan</h1>
     <p>Current Plan: {plan}</p>
     <button onclick="{updatePlan}">Update Plan</button>
     <div>
       <crewmember name="Danny Ocean" plan="{plan}"></crewmember>
       <crewmember name="Rusty Ryan" plan="{plan}"></crewmember>
       <crewmember name="Linus Caldwell" plan="{plan}"></crewmember>
     </div>
   </div>
 );
}

function CrewMember({ name, plan }) {
 return (
   <div>
     <h3 id="name">? {name}</h3>
     <p>? Plan: {plan}</p>
   </div>
 );
}

4. Broadcast Channel API를 이용한 데이터 공유

이전 설정에서는 팀원들이 최소한 서로를 볼 수는 있었지만 서로 다른 장소에 있어 직접 소통할 수 없었다면 어떨까요? 유일한 절약 방법은 Broadcast Channel API입니다.
브로드캐스트 채널 API는 정확한 출처의 브라우저 탭, 창 또는 iframe 간에 데이터를 공유하기 위한 브라우저 기반 솔루션입니다. 연결된 모든 컨텍스트에 메시지를 브로드캐스트하는 통신 채널 역할을 합니다.
영화의 가장 결정적인 순간에 선원들의 철거 전문가이자 해커인 배셔 타르는 EMP 장치(전자기 펄스)를 이용해 카지노의 전기를 차단한다. 그렇다면 이제 금고에 침입할 시간이라는 것을 모두가 알게 될 것입니다.

// create eventBus.js
const eventBus = new EventTarget();
//event emitter component
function SaulBloom() {
 const sendArrivalSignal = () => {
   console.log('?️ Saul Bloom: Enters the casino as the wealthy foreigner.');
   // Emit the custom event 'heistStart'
   eventBus.dispatchEvent(new CustomEvent('heistStart', { detail: 'Saul has arrived' }));
 };
 return (
   <div>
     <h2 id="Saul-Bloom">?️ Saul Bloom</h2>
     <button onclick="{sendArrivalSignal}">Enter Casino</button>
   </div>
 );
}

// LivingstonDell.js
함수 LivingstonDell() {
  const sendSignal = (주제, 메시지) => {
    eventBus.publish(주제, 메시지);
  };

  반품 (
    <div>



<p>이 기사를 개선할 수 있는 방법은 여러 가지가 있다고 확신하므로 대학의 제안이나 수정 사항을 기꺼이 받아들이겠습니다. <br>
또한 iframe, 백엔드를 통한 통합, 긴 폴링을 통한 통합, 스토리지를 통한 통합(예: 인덱스 db)을 사용한 연결을 설명하는 이 기사의 2부를 만들고 싶습니다. ), URL을 통한 통합, third-dom-요소를 통한 통합. 하지만 그럴 겁니다.</p>

<p>읽어주셔서 감사합니다</p>


          </div>

            
        

위 내용은 Heist 전략에서 React State까지: 구성 요소 간 데이터 흐름 방식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!