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

이제 우리는 ExpenseForm.js에서 사용자가 입력한 데이터를 App.js 에 보낼 수 있도록 할 것이다

우리는 데이터를 아래로 넘겨주는 방법만 배웠는데 이제 부모 요소로 넘기는 방법을 배워볼 것이다

속성 props는 중간 컴포넌트를 생략하여 데이터를 전달할 수 없기 때문에 
우리는 ExpenseForm.js > NewExpense.js > App.js 로 순차적으로 전달할 것이다

 

form이 제출될 때 실행된다는 의미에서 onSaveExpenseData 라는 이름으로 함수명을 정했다

Math.random() 은 사실 이론적으로 두 번이상 같은 id를 생성할 수 있기 때문에 완벽한 id 생성법은 아니지만 여기에서는 문제가 없을 것 같다. 

첫번째 스탭으로는 

이제 이 함수의 포인터는 onSaveExpenseData에 값으로 전달하고 싶다
그래서 사용자 지정 ExpenseForm 컴포넌트 안에 있는 onSaveExpenseData 속성은 값으로 이 함수를 받는다

다시 말하지만, 저는 여기서 이것을 실행하지 않고 괄호를 추가하지도 않는다
함수를 가리키기만 한다
그래서 그 함수 자체가 ExpenseForm으로 전달됩니다

 

 

 

 onSaveExpenseData 키에서 얻은 값이

함수이기 때문에 실행할 수 있습니다

그래서 saveExpenseDataHandler가 ExpenseForm.js에서 정의되지 않아도 그 함수를 실행할 수 있다 

 

왜냐하면 onSaveExpenseData를 통해 '포인터'를 전달하기 때문이다.

 

이것은 리액트에서 사용하게 될 아주 중요한 패턴이다

컴포넌트에서 컴포넌트 그리고 자식에서 부모 컴포넌트로 소통하는 방법이다

내가 이해하기로는 NewExpense.js에서 onSaveExpenseData라는 props 이름으로 
saveExpenseDataHandler라는 함수를 전달한다고 이해했다!

"함수에서 포인터를 전달하는 것"이 핵심이었다

 

import React from "react";
import "./NewExpense.css";
import ExpenseForm from "./ExpenseForm";
const NewExpense = () => {
  const saveExpenseDataHandler = (enteredExpenseData) => {
    const expenseData = {
      ...enteredExpenseData,
      id: Math.random().toString(),
    };
    console.log(expenseData);
  }
  return <div className="new-expense">
    <ExpenseForm onSaveExpenseData={saveExpenseDataHandler} />
  </div >
}

export default NewExpense;

 

 

아직 데이터를 동적으로 렌더링하는 방법을 배우지 않았기 때문에 
extenses 배열을 업데이트하지 않을 것이다.

  const addExpenseHandler = (expense) => {
    console.log('In App.js');
    console.log(expense);
  }

  return (
    <div className="App">
      <NewExpense onAddExpense={addExpenseHandler} />
      <Expenses items={expenses} />
    </div>
  );

우리는 또 이렇게 자식 컴포넌트로부터 App.js를 받아서 출력하는 과정까지 해보았다

핵심은 onAddExpense처럼 props를 설정하고 함수를 전달하는 것이다.