[React] 상태 관리에 use-immer만을 사용해도 괜찮을까?

React 공식 문서를 통한 학습 중, use-immer에 대해 접하게 되었다.

 

반복적인 코드를 줄이기 위해 use-state 대신 use-immer를 사용할 수 있다는 내용이었다.

 

그렇다면, 모든 경우에 use-state 대신 use-immer를 사용할 수 있을까?

 

결론부터 말하자면, use-state와 use-immer를 적절히 혼용해야한다고 판단했다.

 

이유를 말하기에 앞서, use-immer에 대해 간단히 설명하겠다.

 

use-immer 란?

use-immer는 immer 라이브러리를 리액트의 상태 관리와 결합하는 훅을 제공한다.

immer는 불변성을 유지하면서 상태를 업데이트하는 것을 간편하게 만들어 주는 도구이며, 

복잡한 상태 구조를 가진 애플리케이션에서 특히 유용하다.

 

use-immer의 장점

• 불변성 유지: 복잡한 객체나 배열을 다룰 때 불변성을 유지하는 것이 중요하다. immer는 기존 상태를 직접 변경하는 것처럼 코드를 작성하되, 실제로는 새로운 불변 상태를 생성한다.
• 가독성 및 유지보수: 복잡한 상태 업데이트 로직을 보다 선언적이고 가독성 있는 방식으로 작성할 수 있다.
• 성능 최적화: immer는 필요한 경우에만 새로운 객체를 생성한다. 이는 리액트의 불필요한 렌더링을 방지하고, 성능 최적화에 도움이 될 수 있다.

use-immer vs useState

• useState는 리액트의 기본 훅으로, 간단한 상태 관리에 적합하다.
• use-immer는 복잡한 상태 구조를 쉽게 관리할 수 있게 해주지만, 약간의 오버헤드가 있을 수 있다.

 

결론

• 단순한 상태: 간단한 상태 관리의 경우 useState만으로 충분하다.
• 복잡한 상태: 중첩된 객체나 큰 배열 등 복잡한 상태를 관리해야 하는 경우 use-immer를 사용하는 것이 좋을 것이다.

 

참고한 문서

https://react.dev/learn/updating-objects-in-state