Series

[ 살펴보기 ] - Jotai

State Management Library인 Jotai에 대해 알아보자

[ 살펴보기 ] Jotai - Atom
Global state management 중 Recoil과 유사한 library를 찾고 있다면 아마 1순위가 Jotai가 되지 않을까 싶다. Recoil을 이미 사용해 본 경험이 있다면 Jotai 역시 금방 익숙하게 사용할 수 있으리라 생각한다. 이번 포스팅에서는 Jotai의 기본이 되는 atom에 대해 살펴보자 Atom config Jotai에서는 state의 단위를 atom config ( 또는 atom )이라고 부른다. Recoil과는 ...
May 4, 20244 min read14
[ 살펴보기 ] Jotai - Async Atom
React Query와 같은 server state를 관리해주는 기술이 널리 사용되고 있는 지금 굳이 global state library를 통해 server fetch data를 관리할 필요는 없겠지만 간혹 state의 초기 값을 server에서 fetch한 값으로 바로 사용해야 하는 경우가 존재한다. 이럴 경우 초기 값은 server에서 fetch한 값으로 사용하되 추후 해당 state 값을 user action을 통해 업데이트 되어야 하는...
May 11, 20243 min read3
[ 살펴보기 ] Jotai - SSR & NextJS
Server side에서 처리된 data를 특정 atom의 초기값으로 사용할 수 있도록 Jotai에서 useHydrateAtoms이라는 util 함수를 제공한다. 아래 예제를 통해 어떻게 NextJS에서 Server에서 fetch한 데이터를 useHydrateAtoms를 통해 특정 atom의 초기값을 설정하는지 살펴보자 NextJS - Page route import { useHydrateAtoms } from "jotai/utils"; ex...
May 18, 20242 min read76
[ 살펴보기 ] Jotai - Utility
Jotai는 앞선 포스트에서 살펴본 Jotai의 기본적인 기능외에 활용할 수 있는 Utility를 제공한다. 이번 포스트에서는 Jotai가 제공하는 Utility에 대해 살펴보자 Resettable Atom Resettable atom은 초기 값을 기억하고 있다가 useResetAtom hook을 통해 다시 초기값으로 되돌린다 import { atomWithReset, useResetAtom } from "jotai/utils"; const ...
May 30, 20243 min read7

Command Palette