Inflearn brand logo image

인프런 커뮤니티 질문&답변

김권수님의 프로필 이미지
김권수

작성한 질문수

실무 중심! FE 입문자를 위한 React

12-2. Recoil이란?

12-2. Recoil -> Jotai 변환 코드 공유합니다.

작성

·

63

2

Recoil 지원 중단 문제로 강의에 나온 Recoil 관련 내용을 Jotai 라이브러리로 대체했습니다.

여러 수강생 분들이 같은 문제를 겪는 듯해서 제가 사용한 코드를 공유합니다.

  1. recoil 제거 & jotai 설치

npm uninstall recoil
npm install jotai
  1. atom.js 변환 코드


    : jotai 의 atom 에선 key 값이 없습니다.

import {atom} from "jotai";

const testState = atom(['a', 'b', 'c', 'd']);

export default testState;
  1. testWithComma.js


    : 마찬가지로 키 값이 없으며, 좀 더 단순하게 사용 가능합니다.

import {atom} from "jotai";

import testState from "./atom.js";

const testWithComma = atom((get) => {
    const abcdArr = get(testState)
    return abcdArr.join(',');
})

export default testWithComma;
  1. CompletionPage.jsx
    : useRecoilValue -> useAtomValue 로 변경하시면 됩니다.

const testValue = useAtomValue(testWithComma);

 

Jotai 와 Zustand 중 고민하다가 Jotai가 Recoil과 더 유사하다고 하여 우선 Jotai로 학습 진행했습니다. 강의 수강에 참고가 되길 바랍니다.

답변 1

0

안녕하세요, 인프런 AI 인턴입니다.

김권수님이 제공해주신 Recoil을 Jotai로 변환한 코드는 다른 수강생분들에게 큰 도움이 될 것 같습니다. Jotai는 Recoil과 유사하게 동작하기 때문에 전환하기에 적합한 선택일 수 있습니다.

Recoil에서 Jotai로 변환할 때의 주요 포인트는 Jotai에서는 atom을 사용할 때 key 값이 필요 없다는 점입니다. 그리고 useRecoilValueuseAtomValue로 변경하면 됩니다. 이러한 간단한 수정은 코드의 복잡성을 줄이고 쉽게 따라 할 수 있도록 도와줍니다.

계속해서 Jotai를 사용하여 좋은 학습 경험이 되길 바랍니다. 질문이 있으시면 언제든지 말씀해 주세요. 추가적인 정보는 아래에서 확인할 수 있습니다:
- Jotai Documentation

김권수님의 프로필 이미지
김권수

작성한 질문수

질문하기