4.2 양방향 바인딩, 부모 자식 컴포넌트 통신 (feat. 유데미 React 완벽 가이드)

https://www.udemy.com/course/best-react/

【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript

이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다.

---

양방향 바인딩

컴포넌트에 value 값을 주는 것으로 양방향 바인딩이 된다.

양방향 바인딩을 하는 이유

• 변경되는 입력값만 수신하는 것이 아니라 입력에 새로운 값을 전달 가능

<input
    type="text"
    value={enteredTitle}
    onChange={titleChangeHandler}
  />

---

자식 대 부모 컴포넌트 통신(상향식)

부모 컴포넌트인 NewExpense.js와  자식컴포넌트인 ExpenseForm.js 간의 data통신을 해보자.

 

부모 컴포넌트에서 props로 onSaveExpenseData를 전달한다.

  return (
    <div className="new-expense">
      <ExpenseForm onSaveExpenseData={saveExpenseDataHandler} />
    </div>
  );
  
  # NewExpense.js

자식 컴포넌트에서 props를 받고 다시 props.onSaveExpenseData(data) 를 사용해서 부모로 data를 전달한다.

const ExpenseForm = (props) => {
.
.
. 생략

  const submitHandler = (e) => {
    e.preventDefault(); // 요청 보내는 것을 막음

    const expenseData = {
      title: enteredTitle,
      amount: enteredAmount,
      date: new Date(enteredDate),
    };

    props.onSaveExpenseData(expenseData); // 부모 컴포넌트로 expeseData를 전달
    setEnteredTitle("");
    setEnteredAmount("");
    setEnteredDate("");
  };
  
  # ExpenseForm.js