[react 리액트] 초간단 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달

 

1. 요약

1) 부모 파일에서 자식 컴포넌트에 함수를 호출하는 '속성'을 하나 등록
2) 부모 파일에서 자식에게 받은 값으로 할 함수를 정함.
3) 자식 파일에서 props 로 부모에게 받은 속성에다가 파라미터로 값을 던짐

 

 

 

 

2. 부모 컴포넌트

1) 부모 파일에서 자식 컴포넌트에 함수를 호출하는 '속성'을 하나 등록
*onData라는 속성을 추가하여 handleData라는 함수를 호출하게 함.

2) 부모 파일에서 자식에게 받은 값으로 할 함수를 정함.
*자식에게 받은 data를 콘솔에 출력하게 함.

import React from "react";

import "./style.css";

import Son from "./Son"

export default function App() {

  const handleData = (data) => {

    console.log(data)

  }

  return (

    <div>

      <Son onData={handleData}/>

    </div>

  );

}

 

 

 

3. 자식 컴포넌트

3) 자식 파일에서 props 로 부모에게 받은 속성에다가 파라미터로 값을 던짐
*부모의 props 중에서 내가 정한 onData 속성에다가 파라미터로 자식의 data 를 넣어줌

import React from "react";

export default function Son(props){

  const data = "this is son's data"

  props.onData(data)

  return <div></div>

}

 

 

 

 

4. 결과

잘 나온다.