React useState 후크에서 객체를 저장하고 업데이트하는 방법

이전 기사에서 how to store and update arrays in useState hook에 대해 설명했습니다. 이 기사에서는 useState 후크를 사용하여 저장된 객체를 수정하는 방법을 살펴봅니다.

프로젝트 설정

다음 명령을 사용하여 반응 프로젝트를 만듭니다.

npx create-react-app react-usestate-object

상태 개체 업데이트

firstName 및 lastName로 2개의 필드를 생성해 보겠습니다.

import { useState } from "react"

function App() {
  const [name, setName] = useState({ firstName: "", lastName: "" })

  return (
    <div className="App">
      <div>
        <label htmlFor="firstName">First Name: </label>
        <input
          type="text"
          name="firstName"
          id="firstName"
          value={name.firstName}
        />
      </div>
      <div>
        <label htmlFor="lastName">Last Name: </label>
        <input
          type="text"
          name="lastName"
          id="lastName"
          value={name.lastName}
        />
      </div>
      <div>
        Name is: {name.firstName} {name.lastName}
      </div>
    </div>
  )
}

export default App

여기에 name 및 firstName 를 저장할 로컬 상태로 lastName 개체가 있습니다. 현재 이러한 필드는 읽기 전용입니다.

계속해서 이러한 필드에 함수onChange를 추가하고 사용자가 입력 필드에 입력할 때 상태 개체를 업데이트해 보겠습니다.

import { useState } from "react"

function App() {
  const [name, setName] = useState({ firstName: "", lastName: "" })

  const setFirstName = e => {
    setName(existingValues => ({
      // Retain the existing values
      ...existingValues,
      // update the firstName
      firstName: e.target.value,
    }))
  }

  const setLastName = e => {
    setName(existingValues => ({
      // Retain the existing values
      ...existingValues,
      // update the lastName
      lastName: e.target.value,
    }))
  }

  return (
    <div className="App">
      <div>
        <label htmlFor="firstName">First Name: </label>
        <input
          type="text"
          name="firstName"
          id="firstName"
          value={name.firstName}
          onChange={setFirstName}
        />
      </div>
      <div>
        <label htmlFor="lastName">Last Name: </label>
        <input
          type="text"
          name="lastName"
          id="lastName"
          value={name.lastName}
          onChange={setLastName}
        />
      </div>
      <div>
        Name is: {name.firstName} {name.lastName}
      </div>
    </div>
  )
}

export default App

여기서는 the spread operator을 사용하여 기존 값을 유지하고 필요한 값만 업데이트합니다.

업데이트를 단일 기능에 결합

두 필드를 업데이트하는 기능이 동일하므로 아래와 같이 공통 업데이트 기능을 작성할 수 있습니다.

import { useState } from "react"

function App() {
  const [name, setName] = useState({ firstName: "", lastName: "" })

  const updateName = e => {
    const fieldName = e.target.name
    setName(existingValues => ({
      // Retain the existing values
      ...existingValues,
      // update the current field
      [fieldName]: e.target.value,
    }))
  }

  return (
    <div className="App">
      <div>
        <label htmlFor="firstName">First Name: </label>
        <input
          type="text"
          name="firstName"
          id="firstName"
          value={name.firstName}
          onChange={updateName}
        />
      </div>
      <div>
        <label htmlFor="lastName">Last Name: </label>
        <input
          type="text"
          name="lastName"
          id="lastName"
          value={name.lastName}
          onChange={updateName}
        />
      </div>
      <div>
        Name is: {name.firstName} {name.lastName}
      </div>
    </div>
  )
}

export default App

여기서는 [variableContainingPropertyName] 표기법을 사용하여 적절한 개체 값을 설정했습니다.

필드가 많으면 the useReducer hook ,
양식 유효성 검사에도 도움이 됩니다.