Redux와 다르게, 전역상태의 설정과 정의가 쉽습니다.
Recoil이 지원하는 Hooks는 React와 굉장히 유사합니다.
React 동시성 모드, Suspense 등을 지원하기 때문에, UX관점에서 유리합니다.
동시성 모드?
<aside> 💡 자바스크립트는 싱글 스레드 기반의 언어이기 때문에, 동기적 코드만으로 프로그램을 구성하면 Blocking 문제가 발생할 수 있습니다. 그렇기에 이벤트 루프를 이용해서, 이 한계점을 최대한 극복하도록 합니다.
</aside>
<aside> 💡 자바스크립트의 라이브러리인 React도 마찬가지입니다. 실제로 동시에 작업이 처리되는 **병렬성(Parallelism)**이 아니라, 동시에 실행되는 것처럼 보이게 하는 동시성(Concurrency) 을 최대한 추구하기 위해, React가 도입하는 모드가 바로, React 동시성 모드입니다.
</aside>
Suspense?
<aside> 💡 컴포넌트의 렌더링을 어떤 작업이 끝날 때까지 잠시 중단시키고, 다른 컴포넌트를 먼저 렌더링할 수 있도록 하는 방법입니다.
</aside>
<aside> 💡 Suspense는 어떤 컴포넌트가 읽어야 하는 데이터가 아직 준비가 되지 않았다고 리액트에게 알려주는 새로운 매커니즘입니다. Suspense를 통해 컴포넌트가 비동기 데이터를 읽어오는 방법을 효율적으로 작성할 수 있게 됩니다.
이는 유지보수와 코드의 가독성, UX면에서 긍정적 결과를 가져오도록 합니다.
</aside>
<Suspense fallback={<p>로딩 중입니다...</p>}>
{/*
해당 <Data/> 컴포넌트의 렌더링 작업이 종료될 때까지
위의 fallback의 속성으로 넘긴 컴포넌트를 대신 보여줌
*/}
<Data />
</Suspense>
Recoil의 기본 사용법을 익히기 위해서는, 크게 핵심 3가지만 알면 됩니다.
Recoil을 React 프로젝트에서 사용하려면 일단 설치를 먼저 해야겠죠?
npm install recoil
React 프로젝트에서, Recoil 상태를 여러 컴포넌트가 활용하기 위해서는, 부모 트리에 RecoilRoot를 배치시키는 과정이 필요합니다.
아래 코드는, React 프로젝트의 Root 컴포넌트index.js에 최상위 컴포넌트로 <RecoilRoot>를 둔 모습을 보여줍니다.
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { RecoilRoot } from "recoil"; // recoil package에서, **RecoilRoot import!**
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<RecoilRoot> // 최상위 컴포넌트로, <RecoilRoot> 사용
<React.StrictMode>
<App />
</React.StrictMode>
</RecoilRoot>
);
[src/store/index.js]
import { atom } from "recoil";
export const textState = atom({
key: 'textState', // unique ID (atom을 구분할 수 있는 유일한 키)
default: '', // atom의 default값
})