航海99 TIL[12/4]

6週間どうやって走ってきたのか分からない実戦種目と発表が終わって迎えた土曜日は甘かったです.今日は特別なことをしないで、やれば評価できるので、来週からのスケジュールを考えて、以前勉強していたことを整理します.
複数の入力ステータスの管理

▶ InputSample.js 1

import React, { useState } from 'react';

function InputSample() {
  const onChange = (e) => {
  };

  const onReset = () => {
  };


  return (
    <div>
      <input placeholder="이름" />
      <input placeholder="닉네임" />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: </b>
        이름 (닉네임)
      </div>
    </div>
  );
}

export default InputSample;

inputが複数ある場合は、usStateを複数回使用して複数のonChangeを作成することで実現できますが、inputでnameを設定し、イベントが発生したときにこの値を参照することが望ましいです.また,ユーザ状態は文字列ではなくオブジェクトの状態を管理する必要がある.

▶ InputSample.js 2

import React, { useState } from 'react';

function InputSample() {
  const [inputs, setInputs] = useState({
    name: '',
    nickname: ''
  });

  const { name, nickname } = inputs; // 비구조화 할당을 통해 값 추출

  const onChange = (e) => {
    const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출
    setInputs({
      ...inputs, // 기존의 input 객체를 복사한 뒤
      [name]: value // 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>
  );
}

export default InputSample;

応答状態でオブジェクトを変更する必要がある場合、

inputs[name] = value;

このように直接変更することはできませんが、新しいオブジェクトを作成して新しいオブジェクトを変更し、ステータスとして使用する必要があります.

setInputs({
  ...inputs,
  [name]: value
});

ここで使用する...構文はspread構文で、既存のオブジェクトを「展開」オブジェクトのすべての内容でコピーします.(注意リンク)
この仕事を「不変性を守る」という.反応素子の状態が更新されたことを検出し、必要な再レンダリングを行うには、不変性を維持します.inputs[name]=valueで既存の状態を直接変更した場合、値を変更しても再レンダリングされません.さらに、応答において不変性を維持し、素子更新性能を最適化しなければならない.