reactJS - 부모와 자식 컴포넌트 사이에서의 데이터 전달

자식에서 부모 컴포넌트로

이번 프로젝트에서 사용했던 방식

import React, { useState } from 'react';

function App() {
  return (
    <div className="App">
      <Parent />
    </div>
  );
};

const Parent = (props) => {
  const [data, setData] = useState("initial data");
  
  ...
  panToNaver(lat, lng, zoom) {
    this.setState({ 
        center: { lat: lat, lng: lng }, 
        zoom: zoom,     
        circlePosition: {
          lat: lat,
          lng: lng
      	}   
    });
  }
  ...
  
  return (
    <>
      <div>{data}</div>
      <Child panToNaver={this.panToNaver.bind()} />
    </>
  );
};

const Child = (props) => {
  return (
    <>
      <button onClick={() => props.panToNaver(place.latitude, place.longitude, 18);}>
        send data to parent
      </button>
    </>
  );
};

 

- 이번 프로젝트에서는 자식 컴포넌트로 function을 넘겨서, 자식 요소에서 그 function을 통해 부모 요소의 변수의 state를 변경시켜주었다. 

- 여러 개의 부모 요소의 state를 다루고 싶을 때 function으로 묶어서 보내면편할것 같다.

 

결론적으로, 자식에서 부모 요소의 state를 변경시키고 싶을 때에는

부모에서 자식으로 setter를 전달하면 된다!!

// 출처: https://velog.io/@soral215/React-%EC%9E%90%EC%8B%9D-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%97%90%EC%84%9C-%EB%B6%80%EB%AA%A8%EB%A1%9C-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EB%B3%B4%EB%82%B4%EA%B8%B0
import React, { useState } from 'react';

function App() {
  return (
    <div className="App">
      <Parent />
    </div>
  );
};

const Parent = (props) => {
  const [data, setData] = useState("initial data");
  
  return (
    <>
      <div>{data}</div>
      <Child setData={setData} />
    </>
  );
};

const Child = (props) => {
  return (
    <>
      <button onClick={() => props.setData("data from child")}>
        send data to parent
      </button>
    </>
  );
};

 

부모에서 자식 컴포넌트로

위에서도 봤듯이 부모에서 자식 컴포넌트로이 데이터 전달은 아래의 코드와 같이 한다.

- 부모 요소에서 자식 요소로 필요한 데이터들을 전달함

- 자식 요소에서는 props와 같은 변수로 데이터들을 전달 받고, props.{keyword} 의 형태로 데이터를 활요앟ㄴ다.

function App() {
  return (
    <div className="App">
      <Parent />
    </div>
  );
};

const Parent = (props) => {
  const [data, setData] = useState("initial data");
  
  return (
    <>
      <Receiver_infos 
      	id={props.location.pathname.substr(18)} 
        naver={props.panToNaver} 
        marker={props.markerPositions} 
        panToMarker = {props.panToMarker}/>
    </>
  );
};

const Child = (props) => {
  return (
    <>
      <button onClick={() => props.panToMarker()}>
        send data to parent
      </button>
    </>
  );
};