내가 레퍼런스가 되자 내가 레퍼런스가 되자

이번에 여러 project에서 공용으로 사용할 모듈을 따로 package로 구성하면서 개발하게 되어 간단하게 사용할 상태 관리 라이브러리를 찾다가 Zustand를 써보게 되었습니다. Zustand를 사용하면서 해당 내용을 정리해 보게 되었습니다. Zustand?Zustand는 React 상태 관리 라이브러리 중 하나이며 hooks 기반의 API를 제공하는 작고 빠르며 확장 가능한 상태 관리 솔루션입니다. 사용 방법먼저 Zustand를 설치합니다.npm install zustand# oryarn add zustand 기본 사용법Zustand를 사용하는 예시 코드를 작성해보겠습니다. 예시 코드의 환경은 React, TypeScript 환경으로 가정하겠습니다.// src/store/count.tsimport ..

이전 useState와 useRef를 비교하는 포스팅에서 useState의 값의 변화와 re-render의 과정이 비동기적으로 이루어진다고 했는데 useState의 set에서 함수형 업데이트를 통해 동기적으로 사용하는 방식에 대해 살펴보려 합니다. useState 비동기적 set 함수예시코드를 간단하게 확인해보겠습니다.import { useState } from "react";function HooksTest() { const [count, setCount] = useState(0); const updateCount = () => { setCount(count + 1); setCount(count + 1); setCount(count + 1); }; return ( ..

기존 레거시 프로젝트를 리팩토링하면서  Recoil을 도입하게 되었습니다. 이전에 React 프로젝트에서는 Redux을 사용했기 때문에 팀 내부에도 기술전파가 필요하여 내용을 정리하게 되었습니다. Recoil?Recoil은 Facebook 팀에서 만든 상태 관리 라이브러리로 공식 페이지에서도 확인할 수 있듯이 Recoil을 React를 위한 상태 관리 라이브러리로 표명하고 있습니다. Recoil에서는 atom이라는 상태 단위와 selector라는 파생된 상태를 나타내는 순수 함수를 통해 상태를 나타냅니다. 자세한 내용은 사용 방법에서 알아보겠습니다. Recoil vs ReduxRedux는 Flux 아키텍처를 베이스로 만들어진 상태 관리 라이브러리로 트리 형태의 store 구조를 가집니다. 비동기 처리를 ..