[React] 객체 업데이트

useState를 사용하여 객체를 업데이트 할 때의 방법입니다.

const [form, setForm] = useState({
  title: '제목',
  description: '설명',
})

const handleInputChange = (e) => {
  setForm({
    ...form,
    [e.target.name]: e.target.value,
  })
}

input이 여러 개여도 해당 방법으로 input의 값을 모두 변경 가능합니다.

 

 

중첩 객체를 업데이트 할 때에는 immer 라이브러리를 사용하면 코드 가독성에 좋습니다.

immer 사용 전

const [form, setForm] = useState({
  title: '제목',
  description: '설명',
  info: {
    level: 1,
    name: 'react',
  }
})

const handleInputChange = (e) => {
  setForm({
    ...form,
    info: {
      ...form.info,
      level: e.target.value,
    },
  })
}

 

immer 사용 후

npm i use-immer

const [form, updateForm] = useImmer({
  title: '제목',
  description: '설명',
  info: {
    level: 1,
    name: 'react',
  }
})

const handleInputChange = (e) => {
  // 일반 객체
  updateForm((draft) => {
    draft[e.target.name]: e.target.value
  })
  
  // 중첩 객체
  updateForm((draft) => {
    draft.info.level = e.target.value
  })
}