[React] Recoil

Recoil이란?

• Recoil은 페이스북에서 만든 상태 관리 라이브러리이다.

• Redux와 Mobx와 같은 전역 상태 관리 라이브러리로 프로그램의 뎁스와 복잡도가 증가함에 따라 편리하게 상태를 관리할 수 있게 해주는 라이브러리이다.

• Recoil로 작성을 하게되면 기존의 Redux를 이용하기 위해 필요로 했던 여러문장의 코드들이 필요가 없어졌다.
  (ex, mapDispatchToProps, Reducer...)

Recoil의 기본 개념

1. Atom

• Atom은 하나의 상태라고 생각할 수 있다. (State 처럼)
• Atom을 변경하거나, 삭제하거나, 하면 해당 Atom을 구독하고있는 컴포넌트들은 렌더링된다.

import {atom} from 'recoil';

export const TODO_LIST = atom({
	key : 'TodoItems',
    default : [],
});

2. useRecoilState

• Atom값을 구독하여 해당 컴포넌트에서 사용할 수 있게 한다.
  (mapStateToProps와 비슷하다고 생각하면 된다.)

import React from 'react';
import {TODO_LIST} from './Atom.js';

function App(){
	const items = useRecoilState(TODO_LIST);
    return(
    	...
    )
}

3. useRecoilValue

• Atom값을 가져와서 사용할 수 있게 한다.
  (단, 세터는 없이 값만 가져오게 된다)

4. useSetRecoilState

• Atom값을 변경할 수 있게 한다. setter!