데이터를 자식컴포넌트에서 부모컴포넌트로 보내기

 

자식컴포넌트에서 부모컴포넌트로 데이터를 보내주고 싶으면???

부모컴포넌트에서 만든 함수를 prop으로 자식한테 넘겨준다.

자식컴포넌트에서 입력받은 데이터를 부모컴포넌트에서 받은 함수의 매개변수로 넘겨주면,

(부모컴포넌트에 함수가 있으므로) 부모컴포넌트에서 데이터를 확인할 수 있다.

 

 

예)

 

App.js > NewExpense.js > ExpenseForm.js 로 상하구조가 설정되어있을 때

ExpenseForm.js에서 받은 데이터를 App.js까지 끌어올려줘야할때는?

1. ExpenseForm에서 NewExpense로 전달
2. NewExpense에서 App으로 전달 

두 단계가 같은 과정으로 이뤄진다.

(반복해서 보면 기억이 잘나니까 두단계짜리 예시를 씀)

 

 

1.

ExpenseForm.js에서 수정한 데이터를 NewExpense.js에서 보고싶으면?

 

NewExpense.js

import React from 'react';

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

const NewExpense = (props) => {
  //NewExpense가 자식인 ExpenseForm에 넘겨줄 함수
  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;

saveExpenseDataHandler란 함수를 만들어서 자식인 ExpenseForm에 prop으로 전달한다 .

자식컴포넌트에서 받은 데이터 (enteredExpenseData) 를  콘솔에 찍어보면 잘 찍힌다.

 

ExpenseForm.js

 

import React, { useState } from 'react';

import './ExpenseForm.css';

const ExpenseForm = (props) => {
  const [enteredData, setEnteredTitle] = useState('');

  const dataChangeHandler = (event) => {
    setEnteredData(event.target.value);
  };

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

    const expenseData = { data: enteredData };
    //부모(NewExpense)가 가진 함수를 자식(ExpenseForm)에 넘겨줌
    props.onSaveExpenseData(expenseData);
    
    setEnteredData('');
  };

  return (
    <form onSubmit={submitHandler}>
      <label>Data</label>
      <input
        type='text'
        value={enteredData}
        onChange={dataChangeHandler}
      />
      <div className='new-data__actions'>
        <button type='submit'>Add Data</button>
      </div>
    </form>
  );
};

export default ExpenseForm;

ExpenseForm에서는 enteredData를 useState로 상태 관리하고 있고 

input 값이 바뀌면 dataChangeHandler가 setEnteredData 함수(setState)로 enteredData를 바꿔준다.

input태그 내에는 value={enteredData}가 있는데, 바뀐  enteredData 의 state가 즉각적으로 적용된다 -(양방향 바인딩)

 

form의 submit 버튼을 클릭할 때 실행되는 submitHandler함수 내에서

(부모 컴포넌트인 NewExpense.js에서 props로 받은) onSaveExpenseData()의 파라미터로 enteredData 데이터를 전달하게된다.

 

 

2.
NewExpense.js에서 받은 데이터를 App.js에서 보고싶으면?

 

같은 일이 App.js와 NewExpense.js에서도 반복된다.

App.js에서 만들어준 함수를 props로 NewExpense.js에 전달하고,

NewExpense.js는 자식컴포넌트 ExpenseForm에 전달하는 함수 안에서 이를 실행한다.

 

App.js

import React from 'react';
import NewExpense from './components/NewExpense/NewExpense';
import Expenses from './components/Expenses/Expenses';

function App() {
   //자식컴포넌트 NewExpense에 전달할 함수
  const addExpenseHandler = (expense) => {
    console.log(expense);
  };

  return (
    <div>
      <NewExpense onAddExpense={addExpenseHandler} />
    </div>
  );
}

export default App;

 

NewExpense.js

import React from 'react';

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

const NewExpense = (props) => {
  //NewExpense가 자식인 ExpenseForm에 넘겨줄 함수
  const saveExpenseDataHandler = (enteredExpenseData) => {
    //자식에게 넘겨받은 데이터로 객체 생성
    const expenseData = {
      ...enteredExpenseData,
      id: Math.random().toString(),
    };
    
    //NewExpense가 부모인 App에게 넘겨 받은 함수 onAddExpense 
    //자식에게 받은 데이터를 부모컴포넌트의 함수에게 전달 
    //ExpenseForm -> NewExpense -> App 순으로 데이터 전달
    props.onAddExpense(expenseData);
  };

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

export default NewExpense;