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

props란?

• 상위(부모) 컴포넌트가 하위(자식) 컴포넌트에게 데이터를 넘겨줄 때 사용한다.
• 하위 컴포넌트는 전달받은 props를 변경할 수 없다.

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. 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달

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;

---

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

• react
• reactjs