문제 정의

상태 관리를 효율적으로 처리하지 못해 불필요한 리렌더링이 빈번하게 발생한 적이 많았습니다. 특히, 여러 번의 상태 업데이트가 연속적으로 일어날 때 예상하지 못한 결과를 자주 마주쳤습니다. 이전 상태를 기반으로 새로운 상태를 계산한다면 문제를 해결 할 수 있을 것 같았습니다.

해결 과정

이 문제는 setState의 함수형 업데이트 방식으로 쉽게 해결이 가능했습니다. 기존의 객체 형태로 상태를 업데이트하던 방식을 함수형으로 변경하여, 이전 상태를 정확히 반영한 상태 업데이트를 구현했습니다.

// 기존 방식
setState(state + 1});

// 함수형 업데이트 방식
setState((prevState) => prevState + 1);

결과

함수형 업데이트 방식을 도입한 후, 상태 업데이트가 정확히 순차적으로 이루어져 리렌더링이 최적화되었습니다.

배운 점 (인사이트)

이전 상태를 기반으로 상태를 업데이트할 때는 항상 함수형 업데이트를 사용하는 것이 안전하며, 예기치 않은 버그를 방지할 수 있어 보입니다. 이렇게 상태 관리 방식을 개선함으로써 불필요한 리렌더링을 줄일 수 있으며, 이는 애플리케이션의 성능 향상으로 직결되고 가독성 및 유지보수성도 향상됩니다.