[React] 함수형 컴포넌트에서 데이터 전달

1. 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달

props 를 이용하여 자식 컴포넌트에게 데이터를 전달한다.

import React from 'react';
import ChildrenComponent from './ChildrenComponent';

function ParentComponent(){
  return(
    <div>
      <ChildrenComponent value="부모 데이터"></ChildrenComponent>
    </div>
    )
}
export default ParentComponent;

import React from 'react';

function ChildrenComponent(props){
  return(
    <div>
      <p>전달 받은 값:{props.value}</p>
    </div>
    )
}
export default ChildrenComponent;

 

2. 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달

자식 컴포넌트는 props를 이용하여 부모 컴포넌트에게 데이터를 전달할 수 없으므로, 부모 컴포넌트로부터 받은 setter 함수 호출을 통해 데이터를 전달할 수 있다.

import React , { useState } from 'react';
import ChildrenComponent from './ChildrenComponent';

function ParentComponent(){
  const [value, setValue] = useState("");
  return(
    <div>
      <ChildrenComponent setValue={setValue}></ChildrenComponent>
      <p>{value}</p>
    </div>
    )
}
export default ParentComponent;

import React , { useState } from 'react';

function ChildrenComponent(props){
  function sendData(){
    props.setValue("자식 데이터");
  }
  return(
    <div>
      <button onClick={sendData}>부모 컴포넌트로 데이터 전달</button>
    </div>
    )
}
export default ChildrenComponent;

 

 

---

출처

- https://songzzi.github.io/2021/11/21/react-2/