[React] 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달하는 법

주로 부모 컴포넌트에서 자식 컴포넌트로 props를 전달하지만, 종종 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하고 싶은 경우가 있다. 

 

 

부모 컴포넌트

import React, { useState } from "react";
import Child from "./components/Child";

function Parent() {
  const [todoList, setTodoList] = useState([]);
  
  return <Child parentFunction={setTodoList}></Child>;
}

export default Parent;

자식 컴포넌트

mport React, { useState } from "react";

function Child({ parentFunction }) {
  const [data, setData] = useState(2);

  parentFunction(data);

  return <div>Child</div>;
}

export default Child;

 

1. 부모 컴포넌트에서 state를 정의하고 state 변경 함수를 자식 컴포넌트에 props로 내려준다. 

2. 그리고 자식 컴포넌트의 데이터를 부모 컴포넌트에서 전달받은 함수의 인자로 전달해준다. 

 

 

---

질문이나 잘못된 점은 댓글로 남겨주세요 :)💖

반응형