[React] 자식이 부모에게 - 콜백 이용 - (2)

# 블로그 좀 살피다가 자식 => 부모로 보내는 부분을 잘못 설명 한거 같아 추가 설명 하고자 함.

# props를 함수로 이용한다고 보기보다 콜백을 이용하여 props를 전달 한다는게 더 맞는 표현 같음.

일반적으로 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달해야 할 경우에는 콜백 함수 (Callback Function)을 사용하게 됩니다. 다음은 콜백 함수를 통해 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하는 예시입니다

 

// 부모 컴포넌트
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [messageFromChild, setMessageFromChild] = useState('');

  const handleChildData = (data) => {
    // 자식 컴포넌트로부터 전달받은 데이터 처리
    setMessageFromChild(data);
  };

  return (
    <div>
      <ChildComponent onChildData={handleChildData} />
      <p>Data from Child Component: {messageFromChild}</p>
    </div>
  );
};

export default ParentComponent;

 

위 예시에서 ParentComponent는 ChildComponent를 렌더링하면서 onChildData라는 콜백 함수를 props로 전달하고 있습니다. ChildComponent에서 어떠한 이벤트가 발생하거나 데이터가 변경되었을 때, 해당 정보를 콜백 함수를 통해 부모 컴포넌트로 전달할 수 있습니다.

 

// 자식 컴포넌트
import React, { useState } from 'react';

const ChildComponent = ({ onChildData }) => {
  const [message, setMessage] = useState('');

  const handleButtonClick = () => {
    // 버튼 클릭 시 부모 컴포넌트로 데이터 전달
    onChildData(message);
  };

  const handleChangeInput = (e) => {
    // 입력값이 변경될 때마다 메시지 업데이트
    setMessage(e.target.value);
  };

  return (
    <div>
      <input type="text" value={message} onChange={handleChangeInput} />
      <button onClick={handleButtonClick}>Send Data to Parent</button>
    </div>
  );
};

export default ChildComponent;

 

ChildComponent에서는 입력 필드와 버튼이 있으며, 버튼 클릭 시 입력된 데이터를 onChildData 콜백 함수를 호출하여 부모 컴포넌트로 데이터를 전달합니다.

이렇게 콜백 함수를 활용하여 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달할 수 있습니다. 콜백 함수를 이용하면 부모-자식 컴포넌트 간의 상호작용을 구현할 수 있습니다. 

 

---

후기

 

이전에 잘못 이해하고 넘어간 부분을

다시 짚고 넘어갔다.

기본적인 부분이지만... 사실 잘못 이해해도 코드를 짜는데 무리는 

없지만

협업에서 같은 분야의 사람과 말할때 조금 그렇다....