Zutand를 알아보자!

프로젝트를 하면서 Zustand에 대해서 처음 알게 되었는데 점점 자주 보이기 시작했습니다. 사람들은 redux를 두고 왜 zustand를 사용하는 걸까요?

Zustand와 Redux는 모두 자바스크립트 애플리케이션에서 상태를 관리하는 데 사용할 수 있는 라이브러리입니다.

Zustand는 상태를 관리하기위한 간단하고 직관적인 API를 제공하는 가벼운 라이브러리입니다. 사용하기 쉽고 배우기 쉽게 설계되어 있으며, 상태 관리에 새로운 개발자에게 적합한 선택입니다. 전역 스토어를 사용하여 React 구성 요소의 상태를 중앙 집중식으로 관리할 수 있으며, 이를 통해 구성 요소의 상태가 코드베이스 전체에 분산되는 것보다 한 곳에서 관리되므로 앱이 더 예측 가능하고 디버깅하기 쉬워집니다.

반면에 Redux는 더 많은 기능을 제공하는 라이브러리로, 상태 관리에 더 강력하고 유연한 접근법을 제공합니다. 대형 및 복잡한 애플리케이션에서 자주 사용되며, 효과적으로 사용하기 위해 조금 더 설정 및 학습이 필요합니다. React와 같은 라이브러리와 함께 사용하여 사용자 인터페이스를 구축하는 데 자주 사용되지만 다른 문맥에서도 사용할 수 있습니다.

Redux 초기화 방법은 slice라고 불리는 리듀서를 초기화해야 합니다. 이것은 상태를 보유하고 상태를 변경하거나 업데이트하도록 허용하는 스토어(store)입니다. 스토어의 상태는 애플리케이션의 모든 상태를 나타내는 단일 및 불변 객체이며, 액션은 단순히 상태의 변경을 설명하는 객체입니다.

위의 그림은 Redux Toolkit을 사용한 샘플 코드입니다. Redux에 비해 더 간단하기 때문입니다. 우리는 리듀서 또는 슬라이스를 초기화해야 하며, 이것은 기본적으로 스토어라고 부릅니다. 이것은 상태를 보유하고 상태를 변경하거나 업데이트하고, 상태를 나열하는 구성 요소는 업데이트 또는 다시 렌더링됩니다.

이제 useSelector를 사용하고, increment와 decrement 액션을 가져와야 합니다. 그리고 dispatch를 호출하고 increment를 전달해야 합니다. 이렇게 하면 구문과 API가 조금 더 복잡해지며, 많은 유연성을 제공하고 빠르기 때문에 많은 일을 할 수 있습니다. 전적으로 동의하지만, 이렇게 하는 것은 좋아하지 않습니다. 작은 것을 하기 위해 모든 것을 만드는 데 애를 쓰는 것과 같아서, 너무 많은 보일러플레이트 코드가 필요합니다.

React Redux에 Zustand가 좋은 이유

간결함: Zustand는 매우 가벼운 라이브러리로, 간단한 API와 최소한의 보일러플레이트 코드를 가지고 있습니다. 이는 특히 작은 프로젝트나 팀에서는 배우고 사용하기가 더 쉬울 수 있습니다.

성능: Zustand는 UI 업데이트에 반응형 접근법을 사용하므로 Redux와 비교하여 상태가 자주 업데이트되는 경우 특히 성능이 향상될 수 있습니다.

테스트 용이성: Zustand의 단순한 API와 의존성이 적어 상태 관리 로직을 테스트하기가 더 쉬울 수 있습니다.

간결성: 더 작은 라이브러리이기 때문에 Zustand를 사용하면 애플리케이션에서 보일러플레이트 코드가 적어질 수 있습니다.

물론, Redux는 여전히 인기있고 널리 사용되는 라이브러리이며, 구체적인 요구 사항과 제약 조건에 따라 어떤 프로젝트에는 더 적합할 수 있습니다. 어떤 상태 관리 솔루션을 선택할지 신중하게 고려하고 프로젝트에 가장 적합한 것을 선택하는 것이 중요합니다. 마지막으로, 어떤 상태 관리 라이브러리를 사용할지 결정하는 것은 특정 애플리케이션의 요구 사항에 따라 결정될 것입니다.