React.js: setState 덮어쓰기와 병합 이해하기
React.js에 처음 입문하고 메이슨리 스타일 레이아웃을 구축하는 작업을 하고있다면, 기존 데이터를 유지한 상태에서 새로운 데이터를 적용해야하는 상황에 직면할 수 있습니다. 이 블로그 포스트에서는 setState 메서드의 동작을 살펴보고 React.js에서 상태 데이터를 적절하게 병합하고 업데이트하는 방법에 대해 논의하겠습니다.
문제: setState를 사용하여 상태 덮어쓰기
상태를 업데이트하기 위해 setState를 사용할 때, 변경 사항을 병합하는 대신 새로운 상태 객체가 기존 상태를 덮어쓰는 것을 알 수 있습니다. 예를 살펴보겠습니다:
this.state = {
point: { x: 0, y: 0 },
radius: 10
};
this.setState({ point: { x: 1 } });
// setState 후, 상태는 다음과 같아집니다:
// { point: { x: 1 }, radius: 10 } (point.y 속성이 사라짐)
위의 예에서 우리는 this.setState({ point: { x: 1 } })가 point 객체의 x 속성만 업데이트하고 y 속성은 그대로 유지할 것으로 예상했습니다. 하지만 병합은 얕은(shallow) 병합이며 새로운 상태가 기존의 point 객체를 완전히 대체합니다.
해결책: 스프레드 연산자 또는 불변성 헬퍼 사용
이 문제를 해결하고 원하는 병합 효과를 얻으려면 두 가지 방법이 있습니다:
1. 스프레드 연산자 사용
스프레드 연산자는 기존 객체의 속성을 복사하여 새로운 객체를 생성할 수 있습니다. 다음은 스프레드 연산자를 사용하는 방법입니다:
this.setState(prevState => ({
point: {
...prevState.point, // 기존 속성 복사
x: 1 // 원하는 속성 업데이트
}
}));
스프레드 연산자를 사용하여 이전 상태에서 기존 속성을 복사한 새로운 point 객체를 생성하고 원하는 속성을 업데이트합니다. 이렇게 하면 기존 상태는 그대로 유지되고 지정된 속성만 업데이트됩니다.
2. 불변성 헬퍼 사용
보다 견고한 해결책을 선호하는 경우, React 애드온에서 제공하는 불변성 헬퍼를 사용할 수 있습니다. 다음은 예시입니다:
var newState = React.addons.update(this.state, {
point: { x: { $set: 1 } }
});
this.setState(newState);
불변성 헬퍼를 사용하면 중첩된 데이터를 더 유연하고 신뢰성있게 업데이트할 수 있습니다. 이 예시에서는 $set 명령을 사용하여 point 객체의 x 속성을 업데이트하고 상태의 다른 속성을 보존합니다.
결론
React.js에서 setState를 사용하여 상태 데이터를 업데이트 할 때, 병합 작업이 어떻게 이루어지는지 이해하는 것이 중요합니다. 이 블로그 포스트에서 다룬 개념을 적용함으로써 (스프레드 연산자 또는 불변성 헬퍼를 사용하는 방법에 상관없이) 원하는 속성만 효과적으로 업데이트하고 기존 데이터를 보존할 수 있습니다.
React.js에서는 얕은 병합이 기본 동작이므로 의도치 않은 덮어쓰기를 피하기 위해 상태 객체를 어떻게 구조화하고 업데이트하는지에 주의하는 것이 중요합니다.
참고 자료 :
https://stackoverflow.com/questions/24898012/react-js-setstate-overwriting-not-merging
같은 카테고리의 다른 글 보기 :
