상향식 데이터 전달 흐름

부모가 자식에게 바구니를 보내면 자식이 바구니를 채워서 올려보내는 흐름이다.

예시로 주어진 코드에서 ExpenseForm 컴포넌트와 NewExpense 컴포넌트를 보겠다.

import React from 'react';
import './NewExpense.css';
import ExpenseForm from './ExpenseForm';

const NewExpense = ({onAddExpense}) => {

  const saveExpenseHandler = expense => {
    const newExpense = {
      **...expense,
      id: Math.floor(Math.random() * 99999)**
    };

    onAddExpense(newExpense);
  };

  return (
    <div className='new-expense'>
      <ExpenseForm **onSaveExpense**={saveExpenseHandler} />
    </div>
  );
};

export default NewExpense;

const ExpenseForm = ({ **onSaveExpense** }) => {
  // 상태 관리...

  const submitHandler = (e) => {
    e.preventDefault();

    const expense = {
      title: userInput.enteredTitle,
      price: userInput.enteredPrice,
      date: new Date(userInput.enteredDate),
    };

    setUserInput({
      enteredTitle: "",
      enteredPrice: "",
      enteredDate: "",
    });

    onSaveExpense(expense);
  };

  // 폼 렌더링...
};