React

[React] Recoil

판교너굴맨 2022. 5. 2. 01:21

Recoil

라이브러리 설치

npm install recoil
yarn add recoil

프로젝트 적용

import React from 'react';
import ReactDOM from 'react-dom';
import { RecoilRoot } from 'recoil';
import App from './App';

ReactDOM.render(
    <RecoilRoot>
        <App />
    </RecoilRoot>
  document.getElementById('root')
);

<RecoilRoot>로 <App> 컴포넌트를 감싸준다.

전역 상태를 관리할 디렉터리 (ex stroe, recoil 등)에서 Atoms(공유 상태)와 Selector(순수 함수) 등을 설정한다.

 

작성하면서 공식문서를 봤는데... 한국어 지원도 되고, 굉장히 잘 읽히는 것 같다. 

일단 다른 상태관리 라이브러리를 사용해봤다면 또는 Hooks를 사용해봤다면 금방 이해가 될 것같다.

시간이 늦었으니 내용은 나중에 추가하고 일단 공식 사이트 뿌리고 도망가버리기..

https://recoiljs.org/ko/docs/introduction/core-concepts

 

주요 개념 | Recoil

개요

recoiljs.org

추가 내용으로는 Recoil의 비동기 통신을 사용하지 않고 React Query를 사용해서 비동기 통신 로직을 작성할 예정이다.