react 자식 대 부모 컴포넌트 통신

import ExpenseForm from './ExpenseForm';

이렇게 ExpenseForm를 import 해와서 사용할 때
자식 컴포넌트를 사용할 때

const NewExpense = () => {
    const saveExpenseDataHandler = (enteredExpenseData) => {
        const expenseData = {
            ...enteredExpenseData,
            id: Math.random().toString()
        }
        console.log(expenseData)
    }

함수를 만들어 준 다음에

    return (
        <div className='new-expense'>
            <ExpenseForm onSaveExpenseData={saveExpenseDataHandler} />
        </div>
    )
}

prop에 넣어준다 이러면 부모 컴포넌트의 함수를 자식 컴포넌트가 사용할 수 있다.

const ExpenseForm = (props) => {
props.onSaveExpenseData(expenseData)
}

이렇게 사용한다.

함수를 줬기 때문에 그냥 바로 사용한다.

이렇게 해서 자식 컴포넌트가 부모 컴포넌트의 함수를 사용할 수 있고 데이터를 줄 수 있다.