React 함수형 컴포넌트간 데이터 전송

https://hanbbistory.tistory.com/38

JS 유사배열과 배열의 차이 / 부모자식 컴포넌트의 관계

 

부모 컴포넌트가 자식 컴포넌트에게 props를 통해 데이터를 전송해줄 수 있지만,

형제 컴포넌트끼리는 데이터 전송이 되지 않고, 자식 컴포넌트에서 부모 컴포넌트에게 데이터를 보내야 할 상황도 있다.

그렇다면 자식에서 부모, 또는 형제 컴포넌트간 데이터 전송은 어떻게 이뤄지는지 확인해보자

 

자식 => 부모 => 형제

useState를 통해 변수를 생성해주고 자식에게 props를 뿌려주고,

setter를 통해 변수를 수정해줄 수 있다.

 

App.js
import React, {useState} from 'react';
function App() {

  const [send, setSend] = useState('데이터'); // useState 변수 생성

  return (
    <div className="App">
      App.js
      <Page1 send={send}/> // 미리 만들어놓은 부모->자식 데이터 전송
      <Page2 setSend={setSend}  /> // setter를 props로 자식에게 뿌려주기
      <Page3 />
      <Page4 />
    </div>
  );
}

export default App;

Page2.jsx

// 클릭 시 useState는 '데이터'에서 '데이터어어어'로 변경시켜 부모 컴포넌트에 전달
const Page2 = (props) => {
    const click = ()=>{
        props.setSend("데이터어어어") 
        console.log(props.send)
    } 
    return(
        <button onClick={click}>page2</button>
    )
}

export default Page2

 

Page2 버튼을 누르자마자 부모 데이터로 전송된 데이터가 Page 1로 뿌려지는 구조로, 데이터가  잘 교류되는 것을 확인할 수 있다.

 

 

기본 페이지

 

page1 7번 클릭

 

page2 클릭

 

다시 page1 클릭