[React] 함수 업데이트 방식 개선

setIsEditing 함수 업데이트 방식 개선

이번에는 setIsEditing 함수를 업데이트하는 방식을 조금 더 안정적이고 명확하게 개선한 코드입니다. 이전에는 setIsEditing(!isEditing)와 같이 상태를 반전시키는 방식으로 상태를 변경했는데, 이 방식에 대해 설명하고, 어떻게 개선할 수 있는지 알아보겠습니다.

기존 방식 (문제점)

setIsEditing(!isEditing);

이 방식은 isEditing 상태의 값을 반전시켜주는 방식입니다. 하지만 React에서는 상태 업데이트가 비동기적으로 이루어지기 때문에, 상태를 업데이트할 때 현재 상태값을 참조하지 못할 위험이 있습니다.

• 예를 들어, 상태가 여러 번 변경되는 경우, isEditing의 이전 상태값을 제대로 참조하지 못할 수 있습니다.
• 이로 인해, 의도한 대로 상태가 업데이트되지 않거나, 상태 값이 예기치 않게 변할 수 있습니다.

---

개선된 방식 (상태 업데이트 함수 사용)

setIsEditing((editing) => !editing);

이제 setIsEditing 함수에 상태 업데이트 함수를 사용하여 이전 상태값을 안전하게 참조하도록 변경했습니다. 여기서 editing은 isEditing의 현재 값을 나타냅니다. 이 값을 반전시켜 새로운 상태를 설정하게 되며, 상태 업데이트가 비동기적으로 처리되더라도 이전 상태를 안전하게 참조할 수 있습니다.

• editing은 isEditing의 이전 상태값을 전달받고, 그 값을 반전시켜 새로운 상태로 설정합니다.
• 이 방식은 여러 번 상태를 업데이트할 때에도 항상 최신 상태를 반영할 수 있기 때문에 더 안전하고 예측 가능한 코드가 됩니다.

---

 

핵심 포인트

• setIsEditing((editing) => !editing) 방식은 이전 상태값을 안전하게 참조하여 상태를 업데이트합니다.
• 이 방법을 사용하면 상태 업데이트가 비동기적으로 이루어져도 항상 올바른 상태값을 반영할 수 있습니다.
• 버튼 텍스트를 동적으로 변경하는 방식(삼항 연산자)을 사용하여 "Edit"과 "Save" 버튼 텍스트가 상태에 따라 자동으로 변경됩니다.

---

결론

• React에서 상태 업데이트를 할 때, 이전 상태를 기반으로 새로운 상태를 계산하려면 setIsEditing((editing) => !editing)처럼 상태 업데이트 함수를 사용하는 것이 안전합니다.
• **setIsEditing(!isEditing)**처럼 단순히 반전시키는 방식은 상태가 여러 번 업데이트될 때 의도한 대로 작동하지 않을 수 있습니다.
• 이렇게 함수 형태로 상태를 업데이트하면 동시 업데이트에 의한 문제를 예방할 수 있으며, 안정적이고 예측 가능한 동작을 보장할 수 있습니다.