React 상태 관리 : 함수형 업데이트 vs 직접 참조 (안전한 상태 업데이트 방법)

React에서 상태 관리는 컴포넌트가 동작하는 데 중요한 역할을 합니다. 하지만 상태 업데이트가 비동기적으로 이루어지기 때문에 최신 상태 값을 기반으로 안전하게 업데이트 하는 방법이 필요합니다.

 

---

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

직접 참조 방식 *

setData([...data,tempdata]);

• 설명 : 이 방식은 현재 상태값인 data를 직접 사용하여 새 데이터를 배열에 추가합니다.
  작동은 하지만 React의 상태 업데이트는 비동기적으로 작동하기 때문에 이 방식은 최신 상태를 참조하지 않을 수 있습니다.
• 위험성 : 다른 상태 업데이트가 비동기적으로 발생할 경우 이전 상태가 참조될 가능성이 있어 데이터 손실이나 충돌이 발생할 수 있습니다.

함수형 업데이트 방식 *

setData((datas)=> [...datas, tempdata]);

• 설명 : 함수형 업데이트를 사용하면 React가 최신 상태 값을 자동으로 전달해주기 때문에 비동기 상태 업데이트 상황에서도 항상 최신 상태 값을 사용하게 됩니다.
• 장점 : 이 방법은 안전한 상태 업데이트를 보장합니다. 상태가 여러 번 변경될 때도 최신 상태를 기반으로 처리하기 때문에 오류 가능성이 줄어듭니다.

 

---

 

왜 함수형 업데이트를 사용해야 할까요 ?

• 비동기 상태 업데이트의 특성 : React는 상태를 비동기적으로 업데이트 합니다. 따라서 여러번의 상태 변경이 빠르게 일어날 때 이전 상태를 참조하면 최신 정보가 반영되지 않거나 데이터가 충돌할 수 있습니다.
• 함수형 업데이트의 역할 : 함수형 업데이트는 React가 최신 상태 값을 보장하도록 해줍니다. 즉 상태가 비동기적으로 변경되더라도 안전하게 값을 업데이트할 수 있습니다.

 

---

 

상태를 관리할 때 직접 상태값을 참조하는 방법도 가능하지만 상태 업데이트가 비동기적으로 일어날 수 있다는 점을 고려할 때 함수형 업데이트 방식을 사용하는 것이 더 안전합니다.

React에서 안정적인 상태 관리를 위해서는 함수형 업데이트 방식을 사용하는 것이 좋습니다.