[TIL 45] 리액트 - 자식 컴포넌트에서 부모컴포넌트로 데이터 넘기기

자식 컴포넌트에서 부모 컴포넌트로 값넘기기

부모컴포넌트

1. 부모컴포넌트에 함수를 만들어준다.

함수에 내가 자식컴포넌트에서 받아올 데이터값을 인자로 넣어준다.
부모컴포넌트에 state값을 만들어준 후 setState값안에 인자를 넣어준다.

2. 부모컴포넌트안에 자식컴포넌트에 함수를 호출한다.

자식컴포넌트 안에 props로
(자식한테 받아온 데이터 인자)=>부모컴포넌트에서 작성한 함수(자식한테 받아온 데이터 인자)를 넘겨준다.

사용방법

//함수정의부분
// 문법
const 함수이름 = (내가자식한테 받아올 데이터 인자값) => {
	setState(내가자식한테 받아올 데이터 인자값);
}
// 실제코드
const callBack = (array) => {
	setNewArray(array);
}

// 함수 실행부분
// 문법
<자식컴포넌트 props로 넘겨줄 이름={(자식함수 인자) => 부모함수(부모함수인자)}/>

//실제코드
<EditProductModal parentCallBack={(p)=>callBack(p)}/>

자식 컴포넌트

1. 부모가 내린 함수에 데이터를 담아준다.

자식컴포넌트에 프롭스로 넘겨받은 이름을 콜백함수로 넣어주고 데이터 인자값에
내가 부모컴포넌트로 넘겨줄 데이터값을 넣어준다.

상황에 따라 인라인 onClick 콜백함수로 넣어주거나
실행할 함수식에 넣어주는 방법이 있다.

//문법 (함수안에 함수넣기)
const 자식컴포함수이름 = () => {
  props 넘겨받을 이름=(보내줄 데이터 스테이트값);
}

//문법 (인라인에 함수넣기)
<div onClick={() => props.프롭스로 넘겨받은 이름("보내줄 데이터 스테이트값")}/>

//실제코드
<div onClick={() => props.parentCallBack(productList)}/>

//실제코드
const clickDoneBtn = () => {
  props.parentCallBack(productList);
}

데이터 전달 과정

부모에서 자식한테 내린 함수를 이용해서
그 함수에 자식이 데이터를 담아준다.
부모는 자식이 담아준 데이터를 받아서
(자식데이터인자) => 부모가 내린 함수(자식한테 받을인자)
부모 함수에 인자를 넣어준다.