React | Hook: State, Props

3258 ワード
React TIL テキストリンク
Hook
  • の最上階からのみHookを呼び出すことができます.繰り返し文、条件文、ネスト関数ではHookを実行できません.
    • import React, { useState } from "react"

function Hooks(props) {
  if (!props.isExist) {
    const [state, setState] = useState(); // Error!
  }

  const [state2, setState2] = useState(); // Error!
}

// react가 여러 훅들을 구분할 수 있는 유일한 정보는 훅이 사용된 순서 뿐이기 때문.
    Hookは、
  • react関数要素内でのみ呼び出されます.
    • Props
  • propsはproperties(プロパティ)、すなわち素子のプロパティ値である.
  • propsは、親コンポーネントからのデータを含むオブジェクトです.
  • propsを使用して、JavaScript値をサブコンポーネントに渡すことができます.(変数、状態値、イベントハンドラ等)
    • State
  • 状態は、素子内部にある素子状態値である.
  • stateは、画面に表示するコンポーネントのUI情報(ステータス)である.
  • ステータスは、構成部品内で定義および使用でき、データは随時変更できます.
    • function Parent() {
  const [color, setColor] = useState('red');

  return (
    <div>
      <h1>Parent Component</h1>
      <Child titleColor={color} changeColor={() => setColor('blue')} />
    </div>
  );
  
function Child(props) {
  return (
    <div>
      <h1 style={{color : props.titleColor}}>Child Component</h1>
      <button onClick={props.changeColor}>Click</button>
    </div>
  );
}
    昇格ステータス
    昇格Stateとは?親のステータスを子イベントに変更します.
    propsの概念を用いて,親の状態値を子のイベントに変換できる.
    イベントハンドラを子に掛け、イベントが発生したときに実行する関数は親によって定義されます.親定義にはsetStateの関数が含まれ、子propsに渡されます.
    たんほうこうせい
    Reactの特徴の1つは一方向性である.親の状態を子供に任せることはできるが、子供の状態を親に任せるのは難しい.
    兄弟の間ではデータを直接伝えることはできません.したがって、すべての兄弟を持つ親コンポーネントでstateを管理し、propsとして各兄弟に渡す必要があります.
    MySQLでよく踏む穴
    構造とユニオン