[ React ] input 여러개 상태 관리하기

import React,{ useState } from 'react'

function State3() {
  // 객체 형태의 상태를 관리
  const [inputs, setInputs] = useState({
    name:'',
    nickname:'',
  });
  // 비구조 항당을 통해서 추출
  const {name,nickname} = inputs;

  const onChange = (e) => {
    // name 값과 value를 매개변수 e에서 추출
    const {name, value} = e.target;
    // React에서 객체 형태를 업데이트 하기위해선 기존의 객체를 복사해야 합니다
    setInputs ({
      ...inputs,
      // 기존의 값을 덮어 씌우고 새로운 값을 넣어줍니
      // 이 방식이 불변성을 지킨다고 합니다
      [name]: value,
    });
  };
  const onReset = () => {
    setInputs({
      // name와 nickname의 값을 비워줌
      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 State3;

setInputs에서 기존의 값을 복사한 다음 새로운 상태로 설정하는 것 을 불변성을 지킨다고 합니다

불변성을 지켜 주어야만 리액트 컴포넌트 에서 상태가 업데이트되는 것을 감지하고 이에 따라 필요한 렌더링이 발생합니다