Jotai3 Jotai - 7GUIs 튜토리얼 - 2 Task 4: Timer Atom 정의 //atoms.ts import { atom } from "jotai"; const baseDurationAtom = atom(15); const elapsedTimeAtom = atom(0); const timerAtom = atom(null); // 이전 예제와의 다른 점은 action을 파마리터로 받습니다. // action에 따라 분기처리를 한 모습입니다. const startTimerAtom = atom(null, (get, set, action: "start" | "stop") => { if (action === "start") { if (get(timerAtom) !== null) { // 타이머가 이미 시작 되었을 경우 return return; } .. 2021. 10. 16. Jotai - 7GUIS 튜토리얼 - 1 Jotai를 만든 다이시 카토상의 블로그에서 튜토리얼을 보고, 실습해볼 겸 작성하는 회고입니다. 다이시상은 Xstate(유한상태기계)의 7GUIS Tasks 튜토리얼을 보고 Jotai로도 7GUIS Task 튜토리얼을 만들어야겠다고 생각했다고 합니다. Jotai를 배울 때 좋은 자료가 될 것이며 7가지 튜토리얼을 진행하면 기본은 물론 응용까지 가능 할 것이라고 생각됩니다. 7GUIS Tasks에 대한 설명 : https://eugenkiss.github.io/7guis/tasks 이번 글에선 튜토리얼 1, 2, 3에 대한 글을 작성했습니다. Task1 : Counter 아마 상태관리 라이브러리를 접하신 분이라면 공식문서에서 봤을 카운터 입니다. Atom 정의 count 정보를 담을 baseCountAto.. 2021. 10. 11. Jotai - 리액트 상태 관리 라이브러리 jotai는 re-render를 최소화하기를 원해서 나오게 된 라이브러리고, Recoil의 아토믹 모델에 영감을 받아 나타났습니다. 아톰 의존성에 기반하여 렌더가 최적화 되고 이것은 리렌더 이슈를 해결할 수 있게 도와줍니다. Jotai는 미니멀 API를 지향하고, TypeScript 기반입니다. React의 useState처럼 간편한 Hook으로 사용할 수 있습니다. 모든 상태는 전역적으로 접근가능하고, 쓸모 없는 리렌더는 일어나지 않습니다. 기본 사용 방법 const countAtom = atom(0) const countryAtom = atom('Japan') Recoil에서는 아래와 같이 문자열 key가 존재해야하지만, jotai는 key가 따로 존재하지 않습니다. const countAtom = .. 2021. 10. 11. 이전 1 다음
