왜 Recoil을 썼나
지금까지 몇개의 프로젝트를 해봤지만 본격적으로 상태관리 라이브러리를 사용해본 적은 없었다. 처음에 시도했던 프로젝트에서는 별도의 라이브러리를 사용하는 대신 react에서 기본적으로 제공하는 context api를 사용했었고, 최근에 진행했던 인스타그램 클론코딩에서는 apollo에서 제공하는 reacitve variable과 client cache만으로 충분히 상태관리가 가능했기 때문이다.
다만 context api는 태생적으로 성능에 영향을 주는 문제가 있었고, 그렇다고 모든 프로젝트에 apollo client를 사용할 수는 없었기 때문에, 별도의 상태관리 라이브러리를 공부할 필요성을 느끼게 되었다.
나에게 주어진 선택지는 크게 recoil, zustand, 2가지였다. redux는 가장 대중적이고 근본있는 상태관리 라이브러리지만, 악명높은 보일러플레이트와 러닝커브로 인해 다른 툴을 먼저 사용해보고 그 다음에 공부해보기로 결정했다. 최근 쉽고 트렌디한 상태관리 라이브러리가 많이 공개됨에 따라 이왕이면 최신 기술을 사용해보자는 생각도 있었다. 그렇게 추려진 후보는 recoil과 zustand였는데, 간단한 서치 결과 모두 redux와 비교해 사전 셋팅과 사용법이 굉장히 쉬웠다. 결론적으로 recoil을 먼저 사용해보기로 했다. 특별한 이유가 있었던 것은 아니고 facebook에서 직접 개발했기 때문이다. 가장 react스러운 상태관리 툴이라고 하니, 뭔가 믿음직스럽고 이질감이 없을 것 같았다.
확실히 쉬운 사용법
이번 미니 프로젝트에서 recoil을 쓰고 느꼈던 점은 단연 '쉽다!' 였다. 사실 외부 상태관리 라이브러리를 처음 사용해보는거라 막연한 두려움이 있었는데, 5분만에 기본적인 사용법을 모두 익히고 바로 실전에 적용할 수 있었다. Root 컴포넌트를 RecoilRoot로 감싸고 atom을 선언한 뒤, 필요한 컴포넌트에서 useRecoilState를 사용해 가져오기만 하면 끝이다. 체감상으로는 오히려 context api보다 사용법이 더 쉬웠던 것 같다.
//step 1: RecoilRoot로 root component 감싸기
//App.js
import {RecoilRoot} from 'recoil';
const App = () => {
return (
<RecoilRoot>
<Home/>
</RecoilRoot>
);
};
export default App
------------------------------------------------
//step 2: store에 atom 정의하기
//store.js
export const sampleState = atom({
key: 'sampleState',
default: 'samlple'
});
------------------------------------------------
//step 3: 필요한 곳에 useRecoilState로 가져다 쓰기 가져오기
//Home.js
import {useRecoilState} from 'recoil';
import {sampleState} from './store';
const Home = () =>{
const [sample,setSample] = useRecoilState(sampleState)
return <>
{...some component}
</>
}
export default Home그 외에도 유용한 기능이 많다
recoil은 useRecoilState 말고도 추가적인 여러가지 함수를 제공하는데, 대표적으로 state와 setState 함수를 선택적으로 가져올 수 있게 해주는 useRecoilValue, useSetRecoilState가 있다. 컴포넌트에 따라 state값만 필요한 경우, setState함수만 필요한 경우가 있을 수 있는데, 이런 경우 아래와 같이 필요한 요소만 가져와서 사용할 수 있다.
const sample = useRecoilValue(sampleState)
const setSample = useSetRecoilState(sampleState)뿐만 아니라 recoil은 selector라는 기능도 함께 제공한다. selector를 사용하면 기존에 정의한 atom의 값을 전처리하여 제공하거나, 상태 변경에 후처리 작업을 정의할 수 있는 등 보다 다채롭게 atom을 활용할 수 있게된다.
selector를 적용하는 대표적인 예시로는 단위환산이 있다. 같은 값에 대해 meter와 feet를 모두 제공하는 서비스의 경우 meter와 feet 각각에 해당하는 state를 선언하여 모두 최신화 하거나, 하나의 값만 state로 선언하고 필요할 때마다 변환하여 사용하는 방법이 있을 수 있다. 여기서 만약 selector를 사용한다면 meter로 정의한 atom을 참조해 feet를 출력해주고, feet의 값을 수정하면 meter state의 값까지 수정해주는 함수를 만들어 사용할 수 있다.(back-end의 computed field와 그 개념이 유사하다는 생각이 들었다.)
초기에는 selector에 대한 이해가 부족하기도 했고, 프로젝트의 규모가 작은 편이었기에 이번 프로젝트에서는 selector를 사용해보지 못했는데, 처음부터 selector를 사용했으면 코드가 조금은 더 간결해지지 않았을까 하는 아쉬움이 들정도로 매력적인 기능이었다.
소감
처음 recoil을 써보고 너무 쉽고 쾌적한 사용법에 감동을 먹었다. 이번에는 아주 기본적인 기능만을 사용했는데, 조만간 더 깊게 배워보고 싶다는 욕심이 생겼다. recoil에서 이렇게 감동을 먹고나니 zustand도 더 기대가 되기 시작했다. 정말 개발의 세계는 배워도 배워도 끝이 없는 것 같다.
