일단 Doit

Recoil에서 atom은 상태(state)를 나타내고 이렇나 atom을 관리합니다. 그럼 동일한 atom을 여러개 생성하고자 하면 어떻게 할까요? 그때 atomFamily를 사용합니다. atom은 key에 따라서 상태가 관리됩니다. 즉, key 변경된다면 동일한 atom도 다른 상태값을 가지게 됩니다. atomFamily를 이러한 key를 전달하여 atom을 생성할 수 있습니다. 예를 들면, InfiniteScroill과 같은 component에서는 component마다 page 번호, 도달여부(hasMore)를 가지고 있게 됩니다. 먼저, 아래와 같은 atom을 생성할 수 있습니다. interface ScrollInfo { page: number; hasMore: boolean; } atom({ ke..

React/Recoil 2023. 3. 8. 16:09

Recoil과 Context 모두 React에서 여러 컴포넌트사이에 상태를 관리 하는 라이브러리입니다. Context는 Props drilling을 해소하고자 만들어진 React에 Built-in된 라이브러리이며, React는 좀더 모던하고 향상된 기능을 지원하는 상태관리를 위한 라이브러리 입니다. Recoil이 대중화되기전에는 Context를 활용하여 상태관리를 하는 프로젝트도 많았지만, 최근에서 Recoil을 많이 사용하는 추세입니다. 그럼 간단한 코드로 두 가지 기능을 비교해보겠습니다. 1. 속성 정의 Recoil : 전역으로 설정되기 때문에 키 값을 가지며 키값은 유일해야 합니다. export const PopupTodoState = atom({ key: 'PopupTodo/show', defau..

React/Recoil 2023. 2. 1. 22:21

Recoil Atom 공식 문서를 보면 상세하게 알 수 있습니다. https://recoiljs.org/docs/basic-tutorial/atoms/ Atoms | Recoil Atoms contain the source of truth for our application state. In our todo-list, the source of truth will be an array of objects, with each object representing a todo item. recoiljs.org 단순하게, Recoil은 상태를 관리하는 라이브러이며, Atom은 상태단위 RecoilState입니다. 간단하게 사용법을 알아보자면, 사용방법은 아주 쉽습니다. key, default 설정만 하면 끝입니다..

React/Recoil 2023. 1. 27. 18:21

React와 같은 SPA(Single Page Application) 에서는 상태관리는 필수가 됐습니다. 요즘 React 프로젝트에서는 상태관리 라이브러리로 Recoil을 많이 사용합니다. Recoil 사용이유나 방법등은 Recoil 공식 문서에 설명이 잘되어있습니다. 시작전, 반드시 문서를 읽어보기를 권합니다. 사용동기 https://recoiljs.org/ko/docs/introduction/motivation 동기 | Recoil 호환성 및 단순함을 이유로 외부의 글로벌 상태관리 라이브러리보다는 React 자체에 내장된 상태 관리 기능을 사용하는 것이 가장 좋다. recoiljs.org 주요개념 Atom 및 Selector https://recoiljs.org/ko/docs/introduction/..

React/Recoil 2023. 1. 25. 17:20