React - 부모➡️자식 / 자식➡️부모 데이터 전달하기🚀

React에서 부모에서 자식으로 자식에서 부모로 데이터 전달할수 있습니다.

 

부모에서 자식은 Props를 이용해서 데이터를 전달할 수 있고,

자식에서 부모 데이터 전달은 부모 컴포넌트에서 데이터를 변경하는 함수를 Props로 전달하고

자식컴포넌트에서 전달받은 함수를 호출해서 데이터를 변경할 수 있습니다.

 

아래 예시를 보면서 알아보도록 하겠습니다.

 

부모➡️자식 데이터 전달하기

부모 컴포넌트

부모 컴포넌트에 name Props를 이용해서 Child 컴포넌트에 전달합니다.

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

export default function Dev() {
  const [name, setName] = useState("Superman");
  
  return <Child name={name}></Child>;
}

자식컴포넌트

자식 컴포넌트 함수에 props 파라미터에서 name 데이터를 가져와서 사용할 수 있습니다.

export default function Child(props) {
  return <p>{props.name}</p>;
}

 

자식➡️부모 데이터 전달하기

부모컴포넌트

부모 컴포넌트 state를 변경하는 함수를 Props를 이용해서 전달합니다.

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

export default function Dev() {
  const [name, setName] = useState("Superman");
  function onSetName(name: string) {
    setName(name);
  }

  return (
    <Fragment>
      <Child updateName={onSetName}></Child>
      <p>{name}</p>
    </Fragment>
  );
}

자식컴포넌트

자식컴포넌트에서 부모에서 받은 함수를 호출하여 데이터를 변경할 수 있습니다.

export default function Child(props) {
  function updateName() {
    props.updateName("batman");
  }

  return (
    <Fragment>
      <p>{props.name}</p>
      <button onClick={updateName}>batman 으로 변경</button>;
    </Fragment>
  );
}

 

React에서 부모, 자식 컴포넌트간의 데이터를 상향식, 하향식으로 전달하는 방법이였습니다.