React에서 상태 처리 수준 향상: Zusstand가 Redux보다 전문가처럼 상태를 관리하도록 돕는 이유는 무엇입니까?

라바 알리 샤

따르다

--

듣다

공유하다

상태 관리는 모든 개발자가 직면해야 하는 애플리케이션을 구축하는 동안 가장 어려운 부분 중 하나입니다. 의심할 바 없이 일부 React Hooks를 사용하면 이 문제를 해결할 수 있지만, 더 큰 앱에서는 상태 관리가 점점 더 복잡해질 수 있습니다. 이러한 경우 useState 및 useReducer 등과 같은 매우 일반적인 React 후크에만 의존할 수는 없습니다. 모든 라이브러리는 특정 문제에 대한 솔루션을 제공하기 때문입니다. React의 경우 더 복잡한 명령문 관리를 위해 Dan Abramov는 Redux라는 라이브러리를 도입했습니다.

Redux는 React 앱 전체에서 독립적으로 사용할 수 있는 중앙 집중식 저장소라는 놀라운 개념을 제공합니다. 이 개념은 개발자가 구성 요소의 현재 상태를 가져오거나 조작하는 것에 대해 걱정하지 않도록 도와줍니다. 여러분이 해야 할 일은 React 앱의 최상위 수준에 있는 공급자에 저장소를 래핑하고 현재 상태를 읽거나 조작하려는 구성 요소에서 일부 Redux 후크를 사용하여 가져오기 기능을 래핑하는 것입니다.

Redux 스토어 생성:

이것이 현재 상태를 업데이트하기 위해 상태에 대해 수행하려는 초기 상태, 감속기 함수 또는 작업을 포함하는 Redux 저장소를 만드는 방법입니다. 이 경우 이 저장소에는 "증가" 또는 "감소" 버튼을 각각 클릭하여 값을 더하거나 빼는 간단한 카운터에 대한 모든 논리가 실제로 포함되어 있습니다.

스토어를 생성했으면 이제 이를 React 컴포넌트와 바인딩할 차례입니다.

index.js 파일의 앱 위에 Redux 스토어를 앱에 제공하고 있습니다. 간단히 말해서, 우리는 React 앱의 최상위 수준에 스토어를 선언하여 해당 상태를 모든 하위 요소에서 사용할 수 있도록 합니다.

이제 Redux Store를 사용하려는 파일로 이동합니다.

Redux 저장소에서 데이터를 가져오려면 useSelector 후크가 필요하며, useDispatch 후크를 사용하면 작업을 호출하여 상태를 업데이트할 수 있습니다.

이것이 Redux에서 상태를 관리하는 방법입니다.

당신이 알아차릴 수 있는 문제는 Redux의 긴 상용구입니다. 이런 간단한 로직을 관리하기 위해서도 위에서 언급한 Redux 상용구를 모두 설정해야 합니다. 때로는 데이터를 얻으려면 추가 useSelector 후크가 필요하고 작업을 호출하려면 useDispatch 후크가 필요하기 때문에 Redux에서 무슨 일이 일어나고 있는지 이해하는 것이 복잡해집니다. 상태 관리가 훨씬 더 복잡한 더 큰 앱에서 사용하기가 바빠집니다.

이 문제에 대한 해결책은 Zustand입니다. 이는 단순화된 Flux 원리를 사용하는 작고 빠르며 확장 가능한 React 상태 관리 솔루션입니다. Zustand는 상태를 관리하고 앱 전체에서 사용할 수 있는 중앙 집중식 저장소와 동일한 개념을 제공합니다.

Zustand의 가장 좋은 점은 Redux와 달리 긴 상용구를 설정하고 추가 후크를 사용하여 상태를 읽고 호출하고 조작할 필요가 없다는 것입니다. 필요한 것은 저장소를 만들고 React 앱 어디에서나 간단하게 사용하는 것뿐입니다. 앱의 최상위 수준에서 공급자를 래핑할 필요가 없습니다.

조건 저장소 생성:

Zustand에서 매장을 만드는 것이 어떻게 간단한지 알아보세요. 생성 기능을 사용하면 됩니다. Zustand로 상점을 만든 후에. 이제 저장소에서 데이터를 읽으려는 구성 요소와 이를 바인딩할 시간입니다.

이것이 액션이라고 불리는 리듀서 함수를 호출하는 방법입니다. 간단히 액션을 가져와서 호출하세요. 그게 다야! 작업을 읽고 전달하기 위해 추가 후크가 필요하지 않습니다. 간단히 가져와서 사용하세요.

위의 모든 코드, Zustand의 단순성 및 Redux와의 비교를 보고 답을 얻었기를 바랍니다. 그러나 다음은 Zustand를 사용하는 동안 얻을 수 있는 몇 가지 특전입니다.

더 복잡하고 규모가 큰 애플리케이션에서는 상태를 관리하는 것이 어려울 수 있습니다. 의심할 바 없이 Redux와 useContext, useReducer 같은 후크가 우리를 도와줄 것입니다. 그러나 문제는 상태를 관리하는 동안 Redux를 사용자 친화적으로 만드는 길고 복잡한 상용구 설정입니다.

여기에 React 앱을 위한 작고 빠르며 확장 가능한 상태 관리 솔루션인 Zustand가 있습니다. 단순성, 상용구 설정이 적고 사용자 친화적인 상태 관리 동작으로 인해 Redux보다 더 유리합니다. 프로덕션에서 Zustand를 자유롭게 사용하고 깨끗하고 간단한 방법으로 상태를 관리하는 아름다움을 즐겨보세요.