Recoil

npm i recoil

// index.tsx
root.render(
  <div>
    <RecoilRoot>
      <QueryClientProvider client={queryClient}>
        <App />
      </QueryClientProvider>
    </RecoilRoot>
  </div>
)

 

atom 만들기

// src/atoms.tc
import { atom } from 'recoil'

export const isDarkAtom = atom({
  key: 'isDark', // 유일해야함
  default: true,
})

 

atom 받아오기

// src/App.tsx
const isDark = useRecoilValue(isDarkAtom)

 

atom 값 바꾸기

// coins.tsx
const setDarkAtom = useSetRecoilState(isDarkAtom)
const toggleDarkAtom = () => setDarkAtom(prev => !prev)

<button onClick={toggleDarkAtom}>Toggle Mode</button>

 

useRecoilValue와 useSetRecoilState 동시에 쓰기

const [isDark, setIsDark] = useRecoilState(toDoState)

 

selector : atom을 가져다가 output 변형가능

Selector는 파생된 state(derived state)의 일부를 나타낸다.
즉, 기존 state를 가져와서, 기존 state를 이용해 새로운 state를 만들어서 반환할 수 있다. 
기존 state를 이용만할 뿐 변형시키지 않는다. 
derived state는 다른 데이터에 의존하는 동적인 데이터를 만들 수 있기 때문에 강력한 개념이다.

export const toDoState = atom<IToDo[]>({
  key: 'toDo',
  default: [],
})
export const toDoSelector = selector({
  key: 'toDoSelector',
  get: ({ get }) => {
    console.log('get', get)
    const toDos = get(toDoState)
    return [toDos.filter(toDo => toDo.category === 'TO_DO'), toDos.filter(toDo => toDo.category === 'DOING'), toDos.filter(toDo => toDo.category === 'DONE')]
  },
})

get으로 atom을 selector로 가져옴

state 자체는 변하지 않지만 selecter가 output을 바꾼것

category는 state안의 하나의 배열에 그대로 들어있지만 output을 바꿔서 다른 배열에 있는것처럼 분기할 수 있음