React14일차-컴포넌트 간 통신

오늘 선별진료소가서 자가키트 하고왔는데 어우 줄서는데 너무걸리고 힘들어요 ㅎㅎ

다들 화이팅

create react app 만들어 npm start해주세요

src/component/A.jsx만들고

import { useState } from "react";

export default function A() {

  const [value, setValue] = useState("안바뀜");

  return (

    <div>

      <B value={value} />

      <button onClick={click}>변경</button>

    </div>

  );

  function click() {

    setValue("변경됨");

  }

}

function B({ value }) {

  return (

    <div>

      <p>여긴B</p>

      <C value={value} />

    </div>

  );

}

function C({ value }) {

  return (

    <div>

      <p>여긴C</p>

      <D value={value} />

    </div>

  );

}

function D({ value }) {

  return (

    <div>

      <p>여긴C</p>

      <E value={value} />

    </div>

  );

}

function E({ value }) {

  return (

    <div>

      <p>여긴E{value}</p>

    </div>

  );

}

작성

이부분 설명을 하면 useState로 변수와 변수고칠 함수를 만들고

<B value={value} />

<button onClick={click}>변경</button>

여기서 클릭시 변경되게 만들어주고 B라는 컴포넌트에 value를 전달

function B({ value })여기서 value값을 받아오게된다.

결국 이과정이 반복된다.

App.js변경

import logo from "./logo.svg";

import "./App.css";

import A from "./component/A";

 

function App() {

  return (

    <div className="App">

      <header className="App-header">

        <img src={logo} className="App-logo" alt="logo" />

        <A />

      </header>

    </div>

  );

}

 

export default App;

 

하고 npm start로 된 창 보면

클릭전

클릭후

이렇게 데이터를 서로 주고 받고 가능하게 할수 있다

A.jsx를 

import { useState } from "react";

export default function A() {

  const [value, setValue] = useState("안바뀜");

  return (

    <div>

      <p>{value}</p>

      <B setvalue={setValue} />

    </div>

  );

}

function B({ setvalue }) {

  return (

    <div>

      <p>여긴B</p>

      <C setvalue={setvalue} />

    </div>

  );

}

function C({ setvalue }) {

  return (

    <div>

      <p>여긴C</p>

      <D setvalue={setvalue} />

    </div>

  );

}

function D({ setvalue }) {

  return (

    <div>

      <p>여긴C</p>

      <E setvalue={setvalue} />

    </div>

  );

}

function E({ setvalue }) {

  return (

    <div>

      <p>여긴E</p>

      <button onClick={click}>변경</button>

    </div>

  );

  function click() {

    setvalue("변경됨");

  }

}

이렇게 수정

value대신 아래로 setvalue를 전달해주고 

젤 하단에서 setvalue함수를 이용해서 value를 변경하면 젤상단에서 그 value를 표시할수 있다.

즉 처음에는 위에서 아래도 데이터를 전달했고  두번째는 위에서 아래로 함수를 받아서 밑에서 위로 데이터를 전달했다

value값을 변경시킬수있는 함수를 젤 아래 함수에 전달함으로써 그함수를 사용해서 젤상단에 정의된 변수를 변경시켰다.