#recoil

Articles tagged with #recoil

[ 살펴보기 ] Recoil - 기타 Utils
이전 포스트에서 살펴본 유용한 기타 hooks이외에 알아두면 좋은 유용한 utils들이 있다. 이번 포스트에서는 Recoil이 제공하는 유용한 utils들을 살펴보자 atomFamily 만약 우리가 atom을 호출할 때 default 값에 특정 parameter를 전달하고 싶다면 해당 util을 사용할 수 있다. 다음 예제를 살펴보자 import { atomFamily } from "recoil"; export const userFamilyS...
Apr 20, 20243 min read1
[ 살펴보기 ] Recoil - 기타 다른 hooks 살펴보기
앞서 recoil을 사용하는데 필수적인 기능을 살펴보았다. 이제 필수적인 기능 외에 어떤 유용한 hooks이 있는지 살펴보자 useResetRecoilState 해당 hook을 사용하면 특정 recoil state를 default로 지정했던 값으로 reset 해준다 const resetUser = useResetRecoilState(userListState); <button onClick={resetUser}>Reset</button> 만약에...
Apr 19, 20242 min read4
[ 살펴보기 ] Recoil - Asynchronous Data Query
Selector를 통해서 데이터를 반환하기 위해 비동기 처리가 필요할 때는 어떻게 해야할까? 아주 간단하다. selector get 함수내에서 async-await를 통해 필요한 비동기 처리를 해주고 그 값을 반환해주면 된다 import { selector } from "recoil"; export const userListSelector = selector({ key: "userListSelector", get: async () =>...
Apr 13, 20242 min read1
[ 살펴보기 ] Recoil - Atom Effects
Atom effects는 atom에 변경이 발생했을 때를 catch하여 변경에 다른 side effect를 발생시킬 수 있다 ( React useEffect와 유사하다 ) 기본적인 형태는 다음과 같다 export const userListState = atom<UserAtom[]>({ key: "userListState", default: userListDefaultState, effects: [ () => { co...
Apr 10, 20243 min read6
[ 살펴보기 ] Recoil - Selector
Selector는 주로 atom state를 기반으로 특정 데이터만 filter하거나 특정 조건에 따라 맞는 data를 return하거나 등의 특정 atom state를 기준으로 다른 형태의 데이터를 반환해줄 때 주로 사용한다 기본 형태는 다음과 같다 // states/recoil/user.ts import { selector } from "recoil"; export const userListSelector = selector({ ke...
Apr 7, 20242 min read3
[ 살펴보기 ] Recoil - Atom
[ 살펴보기 ] State Management Series - Recoil
Mar 29, 20243 min read15