React #14

昇格ステータス

デフォルトではReactは
構成部品はBoottom-up
データはtop-down
Reactでは、データが上から下へ流れます.

上のデータを下から修正します。

あるようですね?(逆データストリーム)

親のステータスを子に変更するイベント.
必要なキーワード

昇格ステータス

親構成部品の「状態を変更する関数」自体を子構成部品に渡します.この関数は子構成部品によって実行されます.
反応と考える
例1)

function ParentComponent() {
  const [value, setValue] = useState("날 바꿔줘!");

  const handleChangeValue = () => {
    setValue("보여줄게 완전히 달라진 값");
  };

  return (
    <div>
      <div>값은 {value} 입니다</div>
      <ChildComponent handleButtonClick={handleChangeValue}  />
    </div>
  );
}

function ChildComponent({ handleButtonClick }) {
  const handleClick = () => {
    // Q. 이 버튼을 눌러서 부모의 상태를 바꿀 순 없을까?
    // A. 인자로 받은 상태 변경 함수를 실행하자!
    handleButtonClick()
  }

  return (
    <button onClick={handleClick}>값 변경</button>
  )
}

例2)子に値を設定する場合

function ParentComponent() {
  const [value, setValue] = useState("날 바꿔줘!");

  const handleChangeValue = (newValue) => {
    setValue(newValue);
  };

  // ...생략...
}

function ChildComponent({ handleButtonClick }) {
  const handleClick = () => {
    handleButtonClick('넘겨줄게 자식이 원하는 값')
  }

  return (
    <button onClick={handleClick}>값 변경</button>
  )
}

Reference
codestates:[react]データストリームを理解し、非同期リクエストを処理