[React] Recoil 사용후기

Recoil은 React의 전역 상태 관리 라이브러리 중 하나이다.

React를 개발한 facebook 팀에서 만들었고, 그 때문인지 호환성도 아주 좋은 것 같다.

---

Recoil 공식 홈페이지

---

Install

npm install recoil

사용전 install

---

RecoilRoot

import { RecoilRoot } from 'recoil';

<RecoilRoot>
    <App />
</RecoilRoot>

RTK의 Provider와 같이 App 컴포넌트를 RecoilRoot 컴포넌트로 감싸주고 시작한다.

---

Atom

import { atom } from 'recoil';

export const item = atom({
	key : 'item_state',
    default : [
    	{
        	id : 0,
            name : 'zero',
            checked : false,
        },
        {
        	id : 1,
            name : 'one',
            checked : true,
        }
    ]
})

recoil에서 지원하는 기본 상태 단위로 이해하고 있다.

• import 후 사용
• key : 고유한 값
• default : state의 기본값

사용하고자 하는 컴포넌트에 직접 사용하는 것도 가능하지만 프로젝트 규모가 커지면 파일을 따로 만들어 보관하며, export 하는 방식으로 사용한다.

---

useRecoilValue, useSetRecoilState, useRecoilState

import { useRecoilValue, useSetRecoilState, useRecoilState } from 'recoil';
import { item } from './atom'; // atom.js라는 파일에 item state가 있다고 가정한다.


const itemState = useRecoilValue(item); // state값만 사용
const setItemState = useSetRecoilState(item); // set함수만 사용
const [itemState,setItemState] = useRecoilState(item) // state, set함수 모두 사용

선언한 state를 가져다 쓰는 방법은 매우 심플하다.

사용자는 그저 state만 사용할지, set 함수만 사용할지, 아니면 둘 다 사용할지 정하기만 하면 된다.

---

Selector

import { selector } from 'recoil';

export const item = atom({
	key : 'item_state',
    default : [
    	{
        	id : 0,
            name : 'zero',
            checked : false,
        },
        {
        	id : 1,
            name : 'one',
            checked : true,
        }
    ]
})

export const item2 = selector({
	key : 'item_2',
    get : ({get}) => {
    	const copyItem = get(item);
        return copyItem.filter((i) => i.id === 0);
    }
})

recoil의 강력한 기능 selector이다.

state 값은 변경하지 않되, 동적으로 사용자가 원하는 데이터만 가져다 쓸 수 있다.

위의 코드와 같이 작성할 경우, id가 0인 데이터만 따로 빼서 사용할 수 있게 된다.

 

selector 또한 atom과 마찬가지로 useRecoilValue, useSetRecoilState, useRecoilState를 통해 사용 가능하다.

투두리스트, 쇼핑몰 등의 카테고리 기능에 아주 제격인 기능이라고 생각한다.

---

전체적으로 RTK에 비해 보일러플레이트가 적어서 좋았고, 사용하는데 큰 어려움도 없었다.

많이 사용해보면서 여러 다른 기능들도 경험해 봐야겠다.

 

https://recoiljs.org/