setState()와 React의 비동기적 성격 이해하기
React를 사용할 때 상태(state)를 관리하는 데에 우리가 주로 사용하는 메소드 중 하나는 setState()입니다. 하지만, setState()가 비동기적인 성격을 가지고 있으므로 이 메소드를 호출한 직후에 업데이트된 상태에 바로 접근하려고 하면 혼동을 일으킬 수 있습니다.
this.state 사용 시 주의사항
일반적으로, React 컴포넌트에서는 this.state를 직접 사용하는 것이 안전합니다. 그러나, setState()의 비동기적 성격 때문에 주의가 필요합니다. 예를 들어 상태를 여러 번 설정하는 함수가 있다고 가정해보겠습니다:
simpleFunc() {
setState({ "counter" : 1 });
setState({ "counter" : 2 });
console.log(this.state.counter); // 값에 대한 보장이 없음
}
위의 예제에서 볼 수 있듯이, this.state에 직접 접근하면 setState()의 비동기적 특성 때문에 올바른 값을 제공받을 수 없는 경우가 있을 수 있습니다. 그렇다면 업데이트된 상태를 올바르게 읽는 방법은 무엇일까요?
비동기적 상태 업데이트 처리를 위한 해결책
업데이트된 상태에 접근하는 가장 확실한 방법은 setState()의 두 번째 매개변수를 활용하는 것입니다. 이 매개변수를 통해 상태 업데이트가 완료된 후 실행되는 콜백 함수를 제공할 수 있으며, 이 콜백 함수를 통해 업데이트된 상태에 접근할 수 있습니다:
myFunc(baz) {
this.setState({ foo: baz + 1 }, () => {
console.log(this.state.foo); // 콜백 함수 내에서 올바른 값을 가지고 있을 것임이 보장됨
});
}
콜백 함수를 활용하여 올바른 타이밍에 업데이트된 상태에 접근할 수 있습니다.
또 다른 방법으로는, setState()를 호출하기 전에 업데이트된 상태를 별도의 변수에 저장하는 것입니다:
myFunc(baz) {
const bazOne = baz + 1;
this.setState({
foo: bazOne
});
console.log(bazOne); // 업데이트된 상태 값을 바로 접근하기
}
별도의 변수에 업데이트된 상태를 저장함으로써, 값을 즉시 접근할 수 있습니다.
React의 아키텍처 결정 이해하기
이제, React가 상태 업데이트를 비동기적으로 처리하는 이유에 대해 궁금할 수 있습니다. 이는 React가 성능을 최적화하기 위해 내부 큐(queue)를 사용하기 때문입니다. 한 번에 여러 번 setState()를 호출하면, React는 이러한 업데이트를 일괄 처리하고 render() 메소드가 실행되기 전에 최종값으로 상태를 업데이트합니다.
React의 state 객체는 일반적인 용도의 저장소나 변수로 사용되는 것이 아니라, 인터페이스/시각적 상태를 관리하는 데에 목적이 있습니다. 실행 중이거나 같은 단계에서 실행되는 메소드 간에 정보를 저장하고 검색하기 위해 일반적인 객체 속성인 this.anyProperty과 같은 방식으로 안전하게 사용할 수 있습니다.
componentWillReceiveProps() {
this.value = '보장됨';
return true;
}
shouldComponentUpdate() {
if (this.value === '보장됨') {
console.log('항상 true를 반환할 것입니다');
}
}
componentDidUpdate() {
this.value = ''; // 정리
}
위 예제에서는 인터페이스 상태 관리와는 관련이 없는 일반적인 객체 속성인 this.value를 사용하며, setState()를 사용할 필요가 없습니다.
결론
React에서의 setState()의 비동기적 성격을 이해하는 것은 상태 업데이트를 효과적으로 처리하기 위해 중요합니다. 업데이트된 상태에 접근하는 방법을 조금 조정할 필요가 있을 수는 있지만, 콜백 함수를 활용하거나 별도의 변수에 업데이트된 값을 저장함으로써 안정적인 해결책을 제공할 수 있습니다.
React의 상태 관리 아키텍처를 이해하고 인터페이스 상태와 일반적인 객체 속성을 구분함으로써 React의 성능 최적화 기능을 활용하면서 애플리케이션의 상태를 효과적으로 관리할 수 있습니다.
