React Tricks Miniseries 7: 다양한 데이터 유형에 대한 setState 방법

반응 상태를 설정하는 것은 항상 까다로운 일이었습니다. 이를 수행하는 방법에는 여러 가지가 있지만 대부분은 안티 패턴인 반면 정확하고 모범적인 방법은 몇 가지뿐입니다.

다양한 데이터 유형의 시나리오에서 반응 상태를 올바르게 설정하는 방법을 살펴보겠습니다.

문자열은 사소한 것이므로 건너뛰겠습니다.

번호

단순히 숫자를 교체하는 경우를 무시하고 숫자 상태 업데이트는 다음과 같이 수행해야 합니다.

setNumber(prev => prev + 1) //same for minus, multiple, divide, etc

개체 상태는 확산 구문을 사용하여 설정됩니다.

사물

setUser(prev => {
  ...user,
  newKey: newValue,
  //OR
  updateKey: updateValue
})

배열 상태는 setState 내부에 새 배열을 "만들고"배열의 이전 상태 뒤에 새 요소를 삽입함으로써 설정됩니다.

어레이

setFruits(prev => [...prev, 'apple']) 
//or
setFruits(prev => [...prev, {name: 'Apple', price: 5}]) 

결론

다른 데이터 유형에 대한 상태 설정은 까다로울 수 있습니다. 모범 사례를 사용하고 항상 이전 값을 사용하여 적절한 방법을 사용하여 상태를 업데이트할 수 있습니다.