본문 바로가기

상태관리

(3)

React의 상태관리 라이브러리, Zustand에 대한 간략 정리글. 독일어로 "상태"를 의미하는 Zustand는 React 애플리케이션에서 단순화된 Flux 패턴을 사용하는 작고 빠른 상태 관리 라이브러리이다.hook을 기반으로 사용하는 간편한 API를 제공하며, 최소한의 보일러플레이트 코드로 사용이 가능하며, 개발자가 상태 관리를 직관적이고 쉽게 처리할 수 있도록 도와준다. 주요 기능 및 특징 1. 심플한 API: Zustand의 API는 매우 간단하다. 보통 1~2개의 hook만 사용하여 상태를 정의하고, 이를 컴포넌트에서 사용할 수 있다. 주로 `create` 함수와 `useStore` 훅을 사용한다.2. 초경량: Zustand는 경량 라이브러리로, 크기가 작고 빠르다. React Context API 기반으로 작동하는 다른 상태 관리 라이브러리와 비..

[ React ] 상태 관리 툴 비교 분석 Recoil vs Zustand 회사에서 새로운 React 프로젝트를 세팅중인데, 전역 상태관리 툴 중에서 팀원들이 빠르게 배우고 활용할 수 있도록 쉽게 React 프로젝트의 상태 관리가 가능한 툴 2가지를 비교해 보게 되었다. Recoil (v0.7.7 기준) 전체 카운터 코드 counter sample code Recoil은 아래처럼 쓰인다. (테스트 코드 일부) import "./App.css"; import { countState } from "./state/countState"; import { useRecoilValue, useSetRecoilState, useResetRecoilState } from "recoil"; function App() { const count = useRecoilValue(countState); ..

[ React / Redux ] Redux 상태 관리 개념정리. 기존에 내가 React 프로젝트에 즐겨 사용하던 상태 관리 라이브러리는 recoil 이었다. 하지만 새로운 회사에서는 Mobx와 Redux를 사용하고 있었다. 그래서 Redux 공부를 위해 공식 홈페이지를 보며 개념 정리를 해보려고 한다. Redux 기본 개념 Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너라고 한다. 일관적으로 동작하고 서로 다른 환경 (서버, 클라이언트, 네이티브)에서 작동하고, 테스트 하기 쉬운 앱을 만들도록 도와주며 Redux는 React뿐만아니라 다른 UI 라이브러리와 함께 사용할 수 있으며, 매우 작은 용랑(의존 라이브러리 포함 2KB)으로 여러 기능들을 편리하게 사용할 수 있다. Redux는 자바스크립트 SPA에서 갖추어야 할 요건들이 점점 복잡해짐에 따라 많은..

이전 1 다음

티스토리툴바