일단 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

구현 방법은 아래와 같습니다. atomFamily를 이용하여 state 관리 useQuery를 사용하여 server data 관리 ref array를 이용하여 각 element를 관리하여 최적화 관리 최적화 Rendering 여부 판단 atomFamily를 이용하여 state 관리 atomFamily를 이용하여 scroll 정보와 리스트 item 정보를 관리합니다. const todoGroupListSelector = atomFamily({ key: 'todoGroupList', default: (key: string) => atom({ key: `todoGroupList_${key}`, default: [] }), }); interface ScrollInfo { page: number; hasMore:..

React 2023. 3. 8. 16:08

React와 같은 SPA는 여러 컴포넌트간의 관계, 즉 state관리가 가장 중요한데, Recoil을 사용하면 State(Recoil Atom)를 관리할 수 있다. https://recoiljs.org/ko/docs/basic-tutorial/selectors/ Selectors | Recoil Selector는 파생된 상태(derived state)의 일부를 나타낸다. 파생된 상태를 어떤 방법으로든 주어진 상태를 수정하는 순수 함수에 전달된 상태의 결과물로 생각할 수 있다. recoiljs.org 그러면, selector는 무엇일까? 단순하게, 정의하면 state를 다양한 형태로 조회하게 해주는 방법이다. - state관리를 위해 recoil을 사용하고 화면과 분리하여 state를 관리하고자 recoi..

React 2023. 3. 1. 21:32

React 에서 useState hook 및 Recoil Atom을 사용하여 React state를 관리 할 수 있습니다. https://blog.naver.com/innovatorwhy/222996259195 React Recoil Atom으로 팝업 관리하기 Recoil Atom 공식 문서를 보면 상세하게 알 수 있습니다. 단순하게, Recoil은 상태를 관리하는 라이브러... blog.naver.com 따라서 관리할 때 state 변경(set)이 발생하게 되는데, 그때 사용하는 불변성관리 라이브러리가 immer입니다. recoil을 사용할때 아래와 같은 방법으로 해당 state를 변경할 수 있습니다. const alertAtom = atom({ key: 'common/alert', default: {..

React 2023. 2. 18. 11:35

https://innovatorwhy.tistory.com/40 [React] Back 버튼으로 Modal 제어하기(1) Android에서는 물리적인 Back 버튼이 존재합니다. 따라서, Hybrid Web 개발시 해당 버튼의 액션을 고려해야 합니다. 고려해야하는 경우는 팝업이나 Toast UI 같은 화면 위에 뜨는 팝업 즉, Layer 팝업이 열 innovatorwhy.tistory.com 위와 달리 window history의 api와 recoil을 활용하면 코드를 간결하게 사용하여 modal을 back버튼으로 제어 할 수 있습니다. 주요 개념은 아래와 같습니다. Modal과 같은 Layered Element들을 배열로 관리합니다. 해당 Modal을 관리하는 화면에서 사용할 수 있는 custom ho..

React 2023. 2. 9. 17:59

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