[TIL] 34 - React Hooks (state hook)

2724 ワード
React テキストリンク
Hookは、関数要素にReact Stateとライフサイクル機能(ライフサイクル特性)を「バインド」できる関数です.
->React文書

クラス構成部品と関数構成部品

  • 系素子
    • class fruits extends react.component {
	this.state : {(
	fisrt: '',
}
  • 関数素子
    • const banana = () => {
return <div> "hello, world!" </div>
    setStateとrefを使用しない場合は、関数素子を使用すると便利です.
    ただし、setStateとrefを関数構成部品にも書き込む場合は、次の操作を行います.
    -->それがフックです.

    Hookのルールを使う

    import React, { useState } from "react"

function Hooks(props) {
 if (!props.isExist) {
	const [state, setState] = useState(); // 불가능!
}
	const [state2, setState2] = useState(); // 불가능!
}

// react가 여러 훅들을 구분할 수 있는 유일한 정보는 훅이 사용된 순서 뿐이기 때문이다.
  • 関数要素のボディからのみ呼び出されます.(条件文、重複文などの関数で呼び出すことはできません)
    • Hookは、
  • react関数要素内でのみ呼び出されます.

    • State Hook


    stateはuseStateを使用する必要があります.
    function Study() {
// [ state, setState ] = useState(초기값) 
 const [count, setCount] = useState(0)```
 const [isModalActive, setIsModalActive] = useState(false);

return (
 <div>
   <span> {count} </span>
   <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
   <button onClick={() => setIsModalActive(!isModalActive)}>modal btn</button>
 </div>

  • onClick時のsetCount(count+1):count値にアクセスし、イベント発生時にその値に1を加算します.

  • onClickでIsModaActiveを設定:isModaActive値にアクセスし、イベント発生時に現在の値に置き換えます.(trueの場合false)
    • [GoLang]#2起動+運転+構築
    Hasuraアクションを使用してGraphqlにあなたの残りのAPIを回してください