Recoil이란

Recoil(리코일)이란 리덕스와 마찬가지로 React의 상태 관리 라이브러리이다. 리덕스와 유사한 기능을 제공하지만, 리덕스보다 더 가볍고 사용하기 쉽다.
Recoil은 React의 API와 잘 통합되어 있으며, 다양한 기능을 제공한다.

Recoil의 장점

• 리덕스보다 더 가볍다.
• 사용하기 쉽다.
• React의 API와 잘 통합된다.
• 다양한 기능을 제공한다.

Recoil의 단점

• 아직 개발 중이다.
• 리덕스만큼 많은 문서나 리소스가 없다.

프로젝트가 작고 간단하다면 Recoil을 선택하는 것이 좋다. 또한 프로젝트의 개발자들이 React에 익숙하지 않다면 Recoil을 선택하는 것이 좋다.

import React, { useState, useEffect } from "react";
import { atom, selector } from "recoil";

const countAtom = atom({
  key: "count",
  default: 0,
});

const incrementCount = () => {
	countAtom.set(countAtom.get() + 1);
};

const renderCount = () => {
	return (
    	<div>
      	The count is : {countAtom.get()}
      	</div>
    )
}

const App = () => {
	const [count, setCount] = useState(0);
  
  	useEffect(() => {
      countAtom.subscribe((newCount) => {
        setCount(newCount)
      });
    }, []);
  
  return (
  	<div>
    	<button onClick={incrementCount}>Increment</button>
		{renderCount()}
    </div>
  );
};

export default App;

위 예제는 countAtom이라는 atom을 사용하여 카운트 값을 저장한다. App 컴포넌트는 countAtom의 값을 구독하고, countAtom의 값이 변경되면 count 상태 값을 업데이트한다.

atom
atom은 Recoil에서 상태를 관리하는 데 사용되는 개념이다. stom은 값을 저장할 수 있는 변수와 유사하지만, atom은 값을 변경할 때 컴포넌트가 재렌더링 된다.
atom 함수는 옵션 키와 기본값은 받는다. 옵션 키는 atom의 고유한 식별자이다.
atom의 값을 변경하려면 set 함수를 사용하다. set함수는 atom의 값을 변경할 때마다 컴포넌트가 재렌더링 된다.
atom의 값을 조회하려면 get 함수를 사용한다. get 함수는 atom의 값을 반환한다.