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

 

🚀

리액트에서 부모 컴포넌트의 데이터를 자식 컴포넌트에 전달할 때는 props를 사용하여 간단하게 전달할 수 있습니다.

 

1. 부모 컴포넌트 -> 자식 컴포넌트

App.jsx

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

function App() {
  const [data, setData] = useState(1);

  return <Child data={data}></Child>;
}

export default App;

Child.jsx

import React from "react";

function Child({ data }) {
  console.log(data);
  return <div>Child</div>;
}

export default Child;

 

그러나 자식 컴포넌트의 데이터를 부모 컴포넌트로 끌어올려야 하는 상황이 종종 생기고 이러한 문제는 함수를 props로 전달하여 해결할 수 있습니다.

 

2. 자식 컴포넌트 -> 부모 컴포넌트

App.jsx

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

function App() {
  const parentFunction = (x) => {
    console.log(x);
  };

  return <Child parentFunction={parentFunction}></Child>;
}

export default App;

Child.jsx

import React, { useState } from "react";

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

  parentFunction(data);

  return <div>Child</div>;
}

export default Child;

먼저 부모 컴포넌트에서 함수를 정의하고 이 함수를 자식 컴포넌트에 props로 내려줍니다.

그리고 자식 컴포넌트의 데이터를 부모 컴포넌트에게 전달받은 함수의 인자로 전달하게 되면 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달할 수 있게 됩니다.