함수 setState를 사용해야 하는 경우

React의 setState 함수는 구성 요소 상태를 업데이트하기 위한 두 가지 구문, 즉 직접 할당 구문과 기능 업데이트 구문을 제공합니다.

직접 할당 구문:

this.setState({pictures: pics})

이 구문은 간단하고 사용하기 쉽습니다. 기존 상태 값을 제공된 새 값으로 직접 대체합니다. 그러나 상태 값이 여러 위치에서 사용되거나 구성 요소의 수명 주기 메서드 내에서 조작되는 경우 잠재적인 문제가 발생할 수 있습니다.

Functional Updater 구문:

this.setState(prevState => ({
  pictures: prevState.pictures.concat(pics)
}))

기능 업데이트 구문은 상태 업데이트가 일관되고 예측 가능하도록 보장하므로 선호됩니다. 이전 상태를 인수로 사용하고 업데이트된 상태를 반환합니다. 이렇게 하면 우발적인 상태 변경을 방지하고 상태가 항상 최신 상태로 유지됩니다.

병합 및 일괄 처리

React는 내부적으로 여러 setState 호출을 단일 업데이트로 병합합니다. 직접 할당 구문은 여러 호출이 동일한 상태 키를 업데이트하려고 시도할 때 병합 문제에 취약합니다. 예:

this.setState({pictures: this.state.pictures.concat(pics1)})
this.setState({pictures: this.state.pictures.concat(pics2)})

기능 업데이트 구문은 자동으로 업데이트를 올바르게 병합하여 사진1과 사진2를 모두 반영하는 최종 상태가 됩니다.

성능 및 효율성

성능상의 이유로 일괄 setState 호출에 반응합니다. 여러 업데이트를 하나로 병합함으로써 React는 구성 요소 업데이트를 최적화하고 불필요한 재렌더링을 줄일 수 있습니다. 기능 업데이트 프로그램 구문은 업데이트가 이전 상태에 따라 달라지도록 허용하여 일괄 처리를 지원합니다.

결론

두 구문을 모두 사용하여 상태를 업데이트할 수 있지만 기능 업데이트 프로그램 구문은 다음과 같습니다. 일반적으로 일관성, 안전성, 병합 기능 및 성능 최적화 지원으로 인해 권장됩니다. 개발자는 기능 업데이트 구문을 사용하여 상태 돌연변이 문제를 방지하고 구성 요소가 정확하고 효율적으로 업데이트되도록 할 수 있습니다.