[React.js] 함수형 업데이트와 직접 참조 업데이트

함수형 업데이트와 직접 참조 업데이트

들어가며

• 리액트(React.js)에서 상태(Status)를 업데이트할 때, 함수형 업데이트 방법과 직접 참조 업데이트 방법의 차이에 대해 정리해본다.

 

함수형 업데이트(Functional Update)

setPosts((prevPosts) => [postData, ...prevPosts])

• 상태 업데이트가 이전 상태를 기반으로 이루어진다.
• 함수형 업데이트를 사용할 경우, 다음과 같은 장점이 있다.

장점	설명
안전성	- 리액트의 상태 업데이트는 비동기적으로 이루어지기 때문에, 여러 상태 업데이트가 동시에 발생할 수 있다. - 이때, 함수형 업데이트 형태를 사용하면 최신 상태 값을 보장할 수 있다. - @prevPosts@는 항상 현재 상태의 최신 스냅샷을 제공한다.
동시성 처리	- 상태 업데이트가 여러 번 연속적으로 발생해도, 항상 최신 상태를 기준으로 업데이트 할 수 있다.

 

직접 참조 업데이트(Normal State Update)

setPosts([postData, ...posts]);

• 현재 상태(@posts@)를 기반으로 업데이트를 시도한다.
  • 이 방식은 상태 값을 직접 참조하여 업데이트를 진행한다.
• 직접 참조 업데이트를 사용할 경우, 다음과 같은 단점이 있다.

단점	설명
비동기 상태 업데이트	- 리액트의 상태 업데이트는 비동기적이기 때문에, 상태가 즉시 업데이트되지 않을 수 있다. - 이때, 여러 상태 업데이트가 동시에 발생하면 이전 상태를 기준으로 업데이트를 하는 것이 아니라, 불완전하거나 오래된 상태를 참조할 수 있다.
상태 동기화 문제	- 만약 상태 업데이트가 여러 번 연속적으로 발생하면, 최신 상태가 아닌 이전 상태를 참조하여 업데이트할 수 있다. - 이로 인해 상태가 올바르게 업데이트되지 않을 수 있다.

 

상태 관리를 할 때, 보다 정확한 상태 업데이트를 위해 함수형 업데이트 방법을 사용하는 것이 좋다.

 

참고 사이트

Why is React useState with functional update form is needed?

React - Normal State Update vs Functional State Update