[React] Hook useState

두 개의 input value를 useState을 이용하여 object형식으로 상태값 관리

👀 1. 잘못 사용한 useState

처음에 이렇게 작성했다. (함수형 컴포넌트)

import React, { useState } from 'react'

const InputField = () => {
  const [size, setSize] = useState({width: '', height: ''})
  const onChange = ({target}) => {
    setSize({[target.name] : target.value})
  }
  return <>
    <input tyep="text" name="width" value={size.width} onChange={onChange} />
    <input tyep="text" name="height" value={size.height} onChange={onChange} />
  </>
}

onchange 이벤트가 발생되면 "Warning: A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component." 이라는 경고 메세지가 콘솔에 찍혔다.

size 상태값도 콘솔에 찍어보니 width, height 각각 찍히고 있었다.
내가 원하는 값은 {width: '', height: ''} Object에서 이벤트가 발생한 input의 값만 업데이트가 되는것이다.
이러다보니 width에서 이벤트가 발생될 때 size 상태가 width값이 존재하고 height는 없어져서 나는 오류 같았다.

클래스 컴포넌트의 setState 메서드와는 다르게, useState는 갱신 객체(update objects)를 자동으로 합치지는 않습니다. (출처 - React 공식문서)

useState는 이전값에서 원하는 부분만 업데이트를 어떻게 하면 될까 고민하면서 리액트 공식 레퍼런스 사이트가서 찾아보니 답이 딱 여기있었다.. Hooks API Reference

👀 2. useState 함수적 갱신

useState 함수적 갱신 - 이전 state를 사용해서 새로운 state를 계산하는 경우 함수를 setState 로 전달할 수 있습니다. 그 함수는 이전 값을 받아 갱신된 값을 반환할 것입니다. (출처 - React 공식문서)

const onChange = ({target}) => {
  setSize(prev => ({...prev, [target.name] : target.value}))
}