리덕스 피하기 2, Recoil

부트캠프를 하는 시절부터 정말 많이 들었던 상태관리 라이브러리가 있다. "리코일", 정말 쉽고 편리하니 써보라는 추천을 정말 많이 받았다. 하지만, 상태관리의 원리와 흐름을 이해하는 것이 우선이라고 판단했던 나는, 리코일과 그 외의 무리들을 물리치고 react-redux를 사용했다.

이제와서 리코일을 건드리는 이유는 명확핟다. 리액트 쿼리를 도입해 보는 것과 마찬가지로 리덕스의 비대한 기능과 복잡성을 줄이고, 새로운 팀원이 합류하더라도 간결하게 코드를 수정, 작성할 수 있도록 하기 위함이다. 그러한 측면에서, 리액트의 출신지 페이스북에서 직접 만든 리코일은 주목도가 높은 라이브러리다.

리코일

1. RecoilRoot

프로바이더를 통해 스토어를 공급하는 리덕스의 코드는 리코일 루트로 대체 되었다. 이 부분만 보면 props를 따로 기재해주는 정도의 차이겠지만, store를 설정하는 과정이 대폭 생략되었다.

//index

<RecoilRoot>
	<App />
</RecoilRoot>

2. atom 작성

atom은 전역으로 관리할 상태값 각각을 의미한다. atom()은 두 개의 값을 가진 객체를 인자로 받는다. 하나는 고유키값, 다른 하나는 기본 상태 값이다.

//atom

import {atom} from "recoil";

export const AtomName = atom({
	key:"ATOM_KEY",
    default:"DEFAULT_VALUE"
})

3. useRecoilValue

React Query 역시 마찬가지였지만, Recoil 역시 리액트스러운 사용성을 통해, 코드의 흐름을 통합하고, 새로 접근하는 개발자들의 적응을 돕는다. Recoil에서는 useRecoilValue라는 일종의 라이브러리 내장 커스텀 훅을 활용하여 해당 값을 조회할 수 있다.

useRecoilValue()는 하나의 인자값을 받는데, 그것은 atom()(혹은 atom의 이름)이다.

//Component
import {AtomName} from "./atom";

const Comp=()=>{
	const stateName = useRecoilValue(AtomName);
	return (
    <>
      {stateName?"atomIsActive":"atomIsNotActive"}
    </>
}

4. useRecoilState

useState를 활용하면, 상태값과 상태를 변경할 수 있는 함수 두 가지를 받을 수 있다. 마찬가지로, 리코일에서도 아톰을 변경할 수 있는 함수를 제공한다. 그 함수에 접근하기 위해서는 useRecoilState를 활용해야한다.

마찬가지로 useRecoilState()역시 atom()(혹은 atom의 이름)을 인자로 받는다.

useRecoilState의 경우 setState처럼 상태값과 set함수 둘을 반환한다.

//Component
import {AtomName} from "./atom";

const Comp=()=>{
	const [stateName, setStateName] = useRecoilState(AtomName);
	return (
    <>
    	<button onClick={()=>setStateName(newValue)}
    </>
}

마무리

너를 먼저 알았더라면, 리덕스를 만날 일은 없었겠지