React DOM 트리의 상호작용

위에서 아래로...

function ParentComponent() {
  const handleButtonClick = () => {
    console.log('Button clicked!');
  };

  return (
    <ChildComponent onButtonClick={handleButtonClick} />
  );
}

function ChildComponent(props) {
  return (
    <div>
      <button onClick={props.onButtonClick}>Click me!</button>
    </div>
  );
}

부모컴포넌트의 handleButtonClick() 함수를 자식컴포넌트에 전달하고 있다.
이외에 부모컴포넌트로 부터 흘러온 Data를 자식컴포넌트에 렌더링하는 경우도 위에서 아래로 상호작용하는 케이스 이다.

아래에서 위로...

import React, { useState } from 'react';

const Form = () => {
  const [formData, setFormData] = useState('');

  const handleInputChange = (event) => {
    setFormData(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // do something with the form data
  };

  return (
    <form onSubmit={handleSubmit}>
      <InputField value={formData} onChange={handleInputChange} />
      <button type="submit">Submit</button>
    </form>
  );
};

const InputField = ({ value, onChange }) => {
  return (
    <input type="text" value={value} onChange={onChange} />
  );
};

export default Form;

하위컴포넌트인 InputField에 사용자가 값을 입력하면, 상위컴포넌트 Form의 handleInputChange를 호출한다.
즉, 아래에서 위로 전달된다.