리코일을 써보자

Recoil

custom hooks

컴포넌트에서 사용

// src/routes/TodoList/Item.tsx
import { useRecoil } from 'hooks/state'
import { todoListState } from 'states/todo'
const [, setTodoList] = useRecoil(todoListState)

정의

//  src/states/todo.ts
import { atom } from 'hooks/state'
import { ITodoItem } from 'types/todo.d'

const INIT_TODO = [ ... ]

export const todoListState = atom<ITodoItem[]>({
  key: '#todoListState',
  default: INIT_TODO,
})

인터페이스 타입정의

// src/types/todo.d.ts
export interface ITodoItem {
  id: number
  title: string
  done: boolean
}

커스텀훅

// src/hooks/state/index.ts 
import {
  atom,
  selector,
  useRecoilState,
  useSetRecoilState,
  useResetRecoilState,
  useRecoilValue,
  useRecoilCallback,
  RecoilState,
  GetRecoilValue,
  SetRecoilState,
  SetterOrUpdater,
  Resetter,
} from 'recoil'

export { atom, selector, useRecoilState, useSetRecoilState, useRecoilValue, useResetRecoilState, useRecoilCallback }

export type { SetterOrUpdater, Resetter, GetRecoilValue, SetRecoilState }

export function useRecoil<T>(recoilState: RecoilState<T>): [T, SetterOrUpdater<T>, Resetter] {
  const [value, setter] = useRecoilState(recoilState)
  const resetter = useResetRecoilState(recoilState)
  return [value, setter, resetter]
}

root index에 지정

// src/index.tsx
import { RecoilRoot } from 'recoil'

...
  <React.StrictMode>
    <I18nextProvider i18n={i18n}>
      <QueryClientProvider client={queryClient}>
        <ReactQueryDevtools />
        <Provider store={store}>
          <RecoilRoot>
            <BrowserRouter>
              <Routes />
            </BrowserRouter>
          </RecoilRoot>
        </Provider>
      </QueryClientProvider>
    </I18nextProvider>
  </React.StrictMode>
...