[26] 리액트 상태 끌어올리기

리액트는 부모에서 자식 컴포넌트로 데이터를 내려주는것을 props 로 해왔다

그럼 자식에서 부모로 데이터를 이동시켜야할때는 어떻게 할까?

만약에 글작성하는 컴포넌트와 글을 보여주는 컴포넌트가 있다고 가정해봤을때

글작성에서 데이터를 입력받아 해당 데이터를 보여주는 컴포넌트로 이동할때

부모와 자식간의 구조가 아니라면 어떻게 처리를 해야될까?

부모컴포넌트에 함수를 선언하고 해당함수를 props 로 자식컴포넌트에 넘긴다
그리고 그 자식컴포넌트는 해당함수의 매개변수를 통해 전달하면
자식컴포넌트에서 부모컴포넌트로 데이터를 이동시킬수있다!

이를 코드로 한번 살펴보자

// 부모컴포넌트 

const NewExpense = (props) => {
  // 데이터를 받기위한 함수 생성
  const saveExpenseDateHandler = (enteredExpenseDate) => {
    const expenseDate = {
      ...enteredExpenseDate,
      id: Math.random().toString(),
    };
    console.log(expenseDate) // 자식컴포넌트에서 저장된 데이터들이 잘 출력됨.
  };
  return (
    <div className="new-expense">
    // 자식컴포넌트에 props 로 데이터를 받기위한 함수를 전달 
      <ExpenseForm onSaveExpenseDate={saveExpenseDateHandler} />
    </div>
  );
};

// 자식컴포넌트 
const ExpenseForm = (props) => {
// 어떤 폼의 submit 버튼을 눌렀을때 폼의 데이터들을 모아서 부모컴포넌트에 전달해주는 역할
  const submitHandler = (e) => {
    e.preventDefault();

// 폼의 데이터들을 모은것 
    const expenseDate = {
      title: enteredTitle,
      amount: enteredAmount,
      date: new Date(enteredDate),
    };

// 부모컴포넌트에서 전달받은 함수를통해 매개변수로 폼의데이터들을 전달 
    props.onSaveExpenseDate(expenseDate);
  };

  return ....

이와 같은 코드구조로 가장 근접해있는 부모컴포넌트를 타고 데이터들을 전달시킬수있으며

부모 컴포넌트에서는 자식 컴포넌트의 데이터들을 사용할수있다.