Recoil 기초 개념

Recoil이란 무엇인가 궁금했다

막연히 클라이언트 상태 관리 라이브러리로만 알고있었다.

하지만 recoil은 react와 닮았다는 것을 아래의 예제를 보며 알게 되었다.

그래서 react 유저라면 사용이 쉽다고 다들 이야기를 한 것이었다.

//React의 useState Hook
const [state, setState] = useState();

//Recoil의 상태 문법
const [state, setState] = useRecoilState();

위와 같이 react에서 state를 사용할 때와 동일하게 사용하면 된다.

대신 추가 해줘야 하는 설정이 있는데, 전역에서 사용하는 라이브러리이니만큼

RecoilRoot와 Atom, Selector를 만들어줘야 한다.

 

Atom과 Selector

1) Atom이 뭐야?

리코일에서 사용되는 상태의 최소단위

기본 state로 사용하기 위한 설정이라고 이해하면 된다.

export const CartItemAtom = ({
key: ‘CartItemAtom’,
Default: [],
})

 

위의 세팅을 리액트에 빗대보자면 useState([]) 상태와 같다고 보면 된다.

여기서 key는 atom의 이름이라고 볼 수 있다.

key는 전역적으로 유일한 값이어야 하기에 네이밍 중복에 유의해야 한다.

 

기본 세팅으로 key는 CartItemAtom으로,

default값은 빈 배열인 []으로 설정해줘보도록 하겠다.

빈 배열로 설정해 준 이유는 CartItem에 대한 정보를 객체로 받을 것이고

하나의 상품만 관리하는 것이 아닌, 여러 상품을 관리하기 위해 배열로 설정해줬다.

꼭 배열을 사용해야 한다는 것은 아니다.

 

2) useRecoilValue 훅과 useSetRecoilValue 훅의 분리

const state = useRecoilValue(‘값’);
const setState = useSetRecoilState(‘값’)

react에서는 state와 setState를 따로 사용하기 위해선 props로 전달해주거나

하나의 컴포넌트에 동시 선언을 해줄 필요가 있었다.

하지만 recoil에서는 위의 예시에서 볼 수 있듯이

state와 setState를 분리해 사용하는 것이 가능하다.

 

일반 state는 useRecoilValue로, setState는 useSetRecoilState라는 메서드로

분리해 사용할 수 있다.

 

3) Selector 사용법

먼저 Selector라는 것은  Atom을 기반으로 파생된 데이터이다.

const Selector = selector({
	Key: ‘키값’,
	get: ({get}) => {
	const 원본 = get(아톰);
	Return 원본변형값;
	}
})

Atom에 존재하는 데이터를 기반으로 새로운 value data를 만드는 역할을 한다고 이해할 수 있다.

Selector를 사용해 편하게 변경된 데이터를 보여줄 수 있다는 점이 큰 장점으로 다가왔다.

---

 

Reference

[잡캐헨리의 리코일 강의]