인프런 커뮤니티 질문&답변
12-2. Recoil -> Jotai 변환 코드 공유합니다.
작성
·
205
4
Recoil 지원 중단 문제로 강의에 나온 Recoil 관련 내용을 Jotai 라이브러리로 대체했습니다.
여러 수강생 분들이 같은 문제를 겪는 듯해서 제가 사용한 코드를 공유합니다.
recoil 제거 & jotai 설치
npm uninstall recoil
npm install jotaiatom.js 변환 코드
: jotai 의 atom 에선 key 값이 없습니다.
import {atom} from "jotai";
const testState = atom(['a', 'b', 'c', 'd']);
export default testState;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;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 값이 필요 없다는 점입니다. 그리고 useRecoilValue를 useAtomValue로 변경하면 됩니다. 이러한 간단한 수정은 코드의 복잡성을 줄이고 쉽게 따라 할 수 있도록 도와줍니다.
계속해서 Jotai를 사용하여 좋은 학습 경험이 되길 바랍니다. 질문이 있으시면 언제든지 말씀해 주세요. 추가적인 정보는 아래에서 확인할 수 있습니다:
- Jotai Documentation





