Recoil 이란?

https://recoiljs.org/ko/
React를 위한 상태 관리 라이브러리

상태 관리 라이브러리가 없으면 컴포넌트들이 많고 넘겨주어야 할 State들이 많으면, 계속 전달해서 State를 넘겨주어야하는데 상태 관리 라이브러리를 사용하면 계속 전달 할 필요 없이 각 컴포넌트에서 바로 접근할 수 있다.

설치

npm install recoil

간단한 사용 방법

Recoil은 내가 경험해 본 상태 관리 라이브러리중에서 비교적 사용법이 간단한 편이었다.

간단한 예제를 통해 사용방법을 알아보즈앗!

우선, Recoil 을 사용하려면 App 컴포넌트를 RecoilRoot 컴포넌트로 감싸주어야한다.

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

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <RecoilRoot>
  	  <App />
    </RecoilRoot>
  </React.StrictMode>
);

이렇게 감싸주면 이제 Recoil 을 사용할 준비는 끝!

그 다음 관리할 State 를 만들어준다.

// atom(): 쓰기 가능한 state를 나타내는 atom를 만든다.
const recoilState = atom({
  key: "stateName", // 상태 이름
  default: "", // 기본값
});

끝났다.

이제 우리가 만든 State 를 가져오거나, Set 하기만 하면 된다.
진짜 쉽다.

State 가져오기

const myState = useRecoilValue(recoilState);

console.log(myState); // " "

Set

const setState = useSetRecoilState(recoilState);

setState("Hello Recoil");

---

이번 포스팅에서는 그냥 간단한 사용법을 적었지만 실은 Recoil에서는 다양한 개념? 명칭? 이 있다.

예를들어 Atom 이라던가.. Selector 라던가..

자세한 내용은 공식문서를 참고하자! ><

https://recoiljs.org/ko/docs/introduction/installation

그래도 간략하게 Atom 과 Selector 개념을 아주 간략하게 적어보자면 다음과 같다!

• Atom : Atom은 상태(state)의 일부를 나타낸다. Atoms는 어떤 컴포넌트에서나 읽고 쓸 수 있다.
  atom의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독한다.
  그래서 atom에 어떤 변화가 있으면 그 atom을 구독하는 모든 컴포넌트들이 리렌더링 되는 결과가 발생할 것이다.

• Selector : Selector는 파생된 state(derived state)의 일부를 나타낸다.
  즉, 기존 state를 가져와서, 기존 state를 이용해 새로운 state를 만들어서 반환할 수 있다. 기존 state를 이용만할 뿐 변형시키지 않는다. derived state는 다른 데이터에 의존하는 동적인 데이터를 만들 수 있기 때문에 강력한 개념이다.