React에서 형제 컴포넌트 간에 데이터 전달은 어떻게 하나요?

React에서 형제 컴포넌트 간에 데이터를 전달하려면 일반적으로 공통의 부모 컴포넌트를 통해 데이터를 전달하는 방법을 사용합니다. 부모 컴포넌트에서 상태(state) 또는 속성(props)을 관리하고, 이를 자식 컴포넌트에 전달하여 형제 간에 데이터를 공유할 수 있습니다.

아래는 부모 컴포넌트에서 상태를 관리하고, 이를 자식 컴포넌트 간에 전달하는 예시입니다:

import React, { useState } from 'react';

function ParentComponent() {
  const [data, setData] = useState('');

  const handleDataChange = (newData) => {
    setData(newData);
  };

  return (
    <div>
      <ChildComponentA onDataChange={handleDataChange} />
      <ChildComponentB data={data} />
    </div>
  );
}

function ChildComponentA({ onDataChange }) {
  const handleInputChange = (event) => {
    const newData = event.target.value;
    onDataChange(newData);
  };

  return (
    <div>
      <input type="text" onChange={handleInputChange} />
    </div>
  );
}

function ChildComponentB({ data }) {
  return (
    <div>
      <p>{data}</p>
    </div>
  );
}

위의 예시에서 ParentComponent는 data라는 상태를 관리하고, handleDataChange 함수를 정의하여 data를 업데이트합니다. ChildComponentA는 입력 필드에 입력된 값을 ParentComponent의 handleDataChange 함수를 호출하여 업데이트합니다. 그리고 ChildComponentB는 data를 받아와서 화면에 렌더링합니다.

이를 통해 ChildComponentA와 ChildComponentB 사이에 데이터를 전달하고 공유할 수 있습니다. 부모 컴포넌트를 통해 데이터를 중계하는 것은 React의 단방향 데이터 흐름 원칙에 따라 형제 간에 데이터 전달을 쉽게 할 수 있는 방법 중 하나입니다.

이 외엔 상태 관리 라이브러리나 Context API를 사용할 수 있습니다.