[React] setState할 때 […] 하는 이유 (ChatGPT)

setState 할때 […] ←— 하는 이유 분석하기

• 언제 써야하고, 안써야 하는지

setState 함수는 React 라이브러리에서 상태(state) 관리를 위해 사용되는 함수입니다. 이 함수를 호출하면 React 컴포넌트의 상태를 업데이트하고, 컴포넌트를 다시 렌더링하도록 스케줄링합니다. setState 함수에 전달되는 값은 변경된 상태를 나타내며, 이 값은 새로운 상태로 컴포넌트를 업데이트할 때 사용됩니다.

setState 함수를 사용할 때 [...] 형태로 이전 상태를 업데이트하는 이유는, React의 상태 업데이트는 불변성(Immutability)을 유지하면서 이루어져야 하기 때문입니다. 이는 다음과 같은 이유로 중요합니다:

1. 성능 최적화: React는 가상 DOM (Virtual DOM)을 사용하여 실제 DOM 조작을 최소화하고 렌더링 성능을 향상시킵니다. 이를 위해 이전 상태와 새로운 상태 간의 차이를 비교하고 최소한의 변경만을 실제 DOM에 반영합니다. 불변성을 유지하면 상태 변경을 더 효율적으로 처리할 수 있습니다.
2. 예측 가능한 업데이트: 상태가 불변적이면 어떤 변화가 일어나는지 예측하기 쉽습니다. 어떤 컴포넌트나 함수에서도 상태가 예측 가능한 방식으로 동작하므로 버그를 줄이고 디버깅을 용이하게 합니다.
3. 얕은 복사(shallow copy): [...] 형태로 상태를 업데이트하면 이전 상태의 얕은 복사본을 만들게 됩니다. 이는 불필요한 객체 생성을 줄이면서도 상태의 변경 사항을 추적하는 데 도움을 줍니다.
4. 불변성 유지: React는 불변성을 기반으로 하여 컴포넌트 간 데이터 공유와 상태 관리를 간단하게 만듭니다. 상태가 불변적이면 여러 컴포넌트에서 같은 상태를 참조하더라도 예기치 않은 동작이 발생하지 않습니다.

따라서, [...] 형태로 이전 상태를 업데이트하는 것은 React의 상태 관리 원칙을 따르고, 상태 변경을 예측 가능하고 효율적으로 다루기 위한 방식입니다.

 

State 업데이트의 불변성 유지: updatedTodos 배열을 생성할 때, 새로운 배열을 생성하여 상태의 불변성을 유지해야 합니다. filter 함수는 기존 배열을 변경하지 않고 새로운 배열을 반환합니다. 따라서 다음과 같이 변경이 필요합니다: