59일차 (Recoil 사용방법 기초)

Recoil

 Recoil은 리액트용 전역 상태관리 라이브러리이다. Recoil에서 중요한 개념은 atom과 selector이다. 먼저 atom은 컴포넌트라는 대륙들의 공중에 떠있는 것과 같은 상태를 말하며 useState의 state와 같다고 볼 수 있다. Selector는 atom을 기반으로 파생된 데이터를 말하며, get 메서드를 통해 받아온 atom을 변형시키는 것을 말한다. 

 

초기 설정

1. Recoil을 설치해야 한다

yarn add recoil
npm i recoil

 

2. Recoil Root 컴포넌트를 프로젝트 최상단 컴포넌트 위에 감싸주면 된다.

// app.js가 최상단일 때
function App() {
	return (
        <RecoilRoot>
        	<APP/>
        <RecoilRoot>
    )
}

 

3. atom 파일 생성

 Atom의 key는 유니크한 값을 가져야 하며, default는 atom의 초기값을 넣어주면 된다. 같은 파일에 selector도 설정을 해놓는데, 형태는 key, get 메서드 또는 set 메서드를 넣어서 설정할 수 있다.

// src > recoil(폴더) > atom.js
import {atom} from 'recoil'

// atom
export const Atom = atom({
	key:'아톰의 이름(유니크해야함)',
	default: [] // useState([])와 동일하다고 보면됨
})

// selector
export const Selector = selector({
	key: 'selector',
	get: ({get}) => {
		const Atom원본 = get(Atom)
		return 원본 변형값
	}
})

 

사용하기

1. atom

 사용하고 싶은 컴포넌트에서 useState와 유사한 형태로 사용이 가능하며, atom의 값만 수정하는 함수를 모두 가져와서 사용하고 싶을 때는 useRecoilState(Atom)을 사용하면 되고, 값만 가져오고 싶을 때는 useRecoilValue(Atom), set함수만 사용하고 싶을 때는 useSetRecoilState(Atom)을 사용하면 된다. (여기서 Atom은 atom.js 파일에서 선언한 atom이다)

// value와 set함수 모두 사용
const [state, setState] = useRecoilState(Atom)

// value만 사용
const state = useRecoilValue(Atom)

// set함수만 사용
const setState = useSetRecoilState(Atom)

 

2. selector

 selector는 Atom을 바탕으로 값을 변형시킬 수 있으며, atom의 set함수는 값을 직접적으로 변형시키지만, selector는 파생시킨다는 차이점이 있다. 사용방법은 위에서 설정한 selector를 원하는 동작에 맞게 설정해 주면 되고, useRecoilValue로 파생된 값을 가져와서 사용하면 된다.

// 설정한 atom에 1을 더하고 싶을 때(src > recoil > atom.js)
export const Selector = selector({
	key: 'selector',
	get: ({get}) => {
		const OriginAtom = get(Atom)
		return OriginAtom + 1
	}
})

// 컴포넌트에서 사용하기(component.js)
const transformAtom = useRecoilValue(Selector)