7. 이번에는 useState로 여러 개의 <input> 상태 값 관리해보기

# <input>이 여러 개라고 useState를 여러 개 사용하는건 좋은 방법이 아니다!

→ useState에서 객체 형태를 통해 여러 상태를 관리해주면 된다!

 

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;
    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>
  );
} 

export default InputSample;

리액트 상태에서 객체를 수정할 때에는 inputs[name] = value; 처럼 직접 수정하면 안됨!

반드시, (1) 새로운 객체를 만들어서 (2) 만든 그 새로운 객체에 변화를 주고, (3) 이를 상태에 반영해주어야 한다. 아래처럼!

 

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

# 여기서 ... 은 spread 문법이라고 한다. "객체의 내용을 모두 펼쳐서 기존 객체를 복사해주는 것"

이렇게 spread를 통해 업데이트해주는 방식을 "불변성을 지킨다" 라고 표현한다. 매우 중요!

→ 불변성을 지켜주어야만 리액트 컴포넌트에서 상태가 업데이트가 되었음을 감지할 수 있고, 이에 따라 필요한 리렌더링이 진행됨.

(inputs[name] = value 처럼 직접 수정을 하게되면, 값을 바꾸어도 리렌더링이 진행되지 않는다!)

​

→ 불변성을 지켜주어야만 컴포넌트 업데이트 성능 최적화를 할 수 있다.

---

출처 : https://react.vlpt.us/basic/09-multiple-inputs.html

9. 여러개의 input 상태 관리하기 · GitBook