[리액트] React에서 사용한 Recoil을 Jotai로 대체하기

React 공부 중 Recoil을 사용한 부분에서 계속 

Uncaught TypeError: Cannot destructure property 'ReactCurrentDispatcher' of 'import_react.default.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' as it is undefined.

^ 해당 에러 발생.

 

원인을 찾아보니 React 19버전부터 Recoil을 지원하지 않는다고 함.
==> Recoil을 포기하고 Recoil과 비슷한 Jotai로 코드를 전부 대체하기로 함.

 

 

기존 Recoil 사용 코드

//Recoil 설치
npm install recoil

//Recoil Atom 생성
import { atom } from 'recoil'

export const searchState = atom<string>({
    key: 'searchState',
    default: 'Korea',
})

//Recoil Atom 불러오는 부분
import { selector } from 'recoil'
import { searchState } from '../atoms/searchState'
import axios from 'axios'

export const imageData = selector({
    key: 'imageData',
    get: async ({ get }) => {
        const searchValue = get(searchState)
        
        return searchValue;
    },
})

//Recoil Selector 불러오는 방법
const imgSelector = useRecoilValueLoadable(imageData)

 

 

Jotai가 더 코드가 간단한 것같다.

 

변경 Jotai 부분

//Jotai 설치
npm install jotai

//Jotai Atom 생성
import { atom } from "jotai";

export const searchState = atom("Korea");

//Jotai Atom 불러오는 부분
import { atom } from "jotai";
import axios from "axios"; //api
import { searchState } from "@/recoil/atoms/searchState";

export const imageData = atom(async (get) => {
  const searchValue = get(searchState);
  return searchValue;
});

//Jotai atom 불러오는 방법
const [imgSelector] = useAtom(imageData);