[React] Hooks: useState

24008 ワード
React テキストリンク
コンポーネント内のコンテンツをユーザーによってインタラクティブに変更する必要がある場合、どのように実装するかを見てみましょう.
反応16.8以前のバージョンでは,関数型素子は状態を管理できなかったが,反応16.8にはHooks機能が導入され,関数型素子も状態を管理できるようになった.

❗ useState


useState関数はreactionのhooksの1つです.
const [현재 상태값, 상태값 갱신함수] = useState(상태 초기값);
本来は次のコードのように書くべきですが、ES 6のdestructuring(構造分解構文)を使って各要素を抽出し、上のコードのように使います.
const numberState = useState(0);
const number = numberState[0];
const setNumber = numberState[1];
import React from 'react';
import Counter from './components/counter';
export default function App() {
  return (
    <Counter />
  );
}
import React from 'react';
export default function Counter() {
  return (
    <div>
      <h1>0</h1>
      <button>+1</button>
      <button>-1</button>
    </div>
  );
}

次に、+1ボタンをクリックすると数値が増加し、-1ボタンをクリックすると数値が減少する文をコンソールウィンドウに表示する関数を作成します.
import React from 'react';
export defualt function Counter() {
  const onIncrease = () => {
    console.log('1이 증가되었습니다.')
  }
  const onDecrease = () => {
    console.log('1이 감소하였습니다.');
  }
  return (
    <div>
      <h1>0</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

構成部品のダイナミック値をステータスと呼びます.リアクターにはuseStateという関数があり、素子で状態を管理することができます.
import React, { useState } from 'react';
function Counter() {
  const [number, setNumber] = useState(0);
  const onIncrease = () => {
    setNumber(number + 1);
  }
  const onDecrease = () => {
    setNumber(number - 1);
  }
  return (
    <div>
      // 이제 h1에서는 0이 아니라 {number}를 보여주어야 한다.
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

📕 useState()を使用して複数のステータス値を管理する

  • ☝🏻 inputラベルは1つしかありません.
    • import React, { useState } from 'react';
export default function User () {
  const [text, setText] = useState('');
  const onChange = (e) => {
    setText(e.target.value);
    // 이벤트가 일어나는 타겟의 value를 text값으로 업데이트 한다.
  };
  const onReset = () => {
    setText('');
    // text 값을 공백으로 업데이트 한다.
  };
  return (
    <div>
      <!-- onChange 이벤트 등록 value값에 text 상태값 주기 -->
      <input onChange={onChange} value={text} />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>내용: {text}</b>
      </div>
    </div>
  );
}
  • ✌🏻 複数のinputラベルがある場合:
    同じタグが複数ある場合は、複数のusState、onChangeを作成するのではなく、各タグにname値を設定し、イベントが発生したときにステータス値を管理することが望ましい.
    • import React, { useState } from "react";
export default function User() {
  // 여러개의 state를 관리해야 하기 때문에 useState함수는
  // 객체 형태여야 한다.
  const [inputs, setInputs] = useState({
    name: "",
    nickname: ""
    // 초기값 설정
  });
  // 두 name 속성값을 추출
  const { name, nickname } = inputs;
  const onChange = (e) => {
    // 이벤트 타겟 속성 value, name 추출
    const { value, name } = e.target;
    setInputs({
      ...inputs,[name]: value,
    });
  };
  const onReset = () => {
    setInputs({
      name: "",
      nickname: "",
    });
  };
  return (
    <div>
      <input
    	name="name"
    	placeholder="이름"
    	onChange={onChange}
	value={name} />
      <input
	name="nickname"
        placeholder="닉네임"
        onChange={onChange}
        value={nickname} />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>소개 : </b>
        {name} ({nickname})
      </div>
    </div>
  );
}
    リアクターでオブジェクトを修正するときは、次のコードのように直接修正することはできません!
    inputs[name] = value
    spread構文を使用して既存のオブジェクトをコピーし、新しいオブジェクトを作成し、ステータスを更新する必要があります.

    👉🏻 コメントリンク
    RMAN delete noprompt obsoleteパラメータ研究
    [Programmers/Python/奥行き、幅優先ナビゲーション(DFS,BFS)]-ネットワーク