[React] useState 여러번 사용하기

컴포넌트에서 관리해야 할 상태가 여러 개일 경우, 하나의 useState로 여러개의 상태값을 관리하는 방법이 있다.

먼저 하나하나 상태값을 주는 방법이다.

const Info = () => {
  const [name, setName] = useState('');
  const [nickname, setNickname] = useState('');

  const onChangeName = e => {
    setName(e.target.value);
  };

  const onChangeNickname = e => {
    setNickname(e.target.value);
  };

  return (
    <div>
      <div>
        <input value={name} onChange={onChangeName} />
        <input value={nickname} onChange={onChangeNickname} />
      </div>
    </div>
  );
};

useState 하나에 여러 상태를 관리하는 방법은 다음과 같다.

import React, { useState } from 'react';

const Info = () => {
  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 로 설정 (이때 [name]은 계산된 속성명 구문 사용)
    });
  };

  return (
    <div>
      <input name="name" placeholder="이름" onChange={onChange} value={name} />
      <input name="nickname" placeholder="닉네임" onChange={onChange} value={nickname}/>
    </div>
  );
}

다만, 객체를 수정해야 할 때 주의할 점이 있다. inputs[name] = value; 이런 식으로 직접 수정하면 안 된다.

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

이렇게 새로운 객체를 만들어서 새로운 객체에 변화를 주는 식으로 사용해야 한다.