Recoil을 적용해보자.
Review
Recoil을 마지막으로 클라이언트 상태 관리까지 마쳤다. Recoil은 무엇보다도 간편하고, 간편했다. Redux를 좋아하는 편이지만 비교가 많이 되는 것은 사실이다. 특히 서버 상태를 다른 라이브러리를 활용하게 된다면 클라이언트 상태 관리는 더 가벼운 것으로 선택하게 될 것 같다.
상태 관리는 다양한 방법이 있다보니 새로운 것을 만들게 될 때마다 어떤 것으로 할지 항상 고민했었다. 아무래도 한가지 방법을 선택한 뒤에 어떤 문제에 부딪혀 리팩토링을 하는 일은 쉽지 않기때문에 더 고민을 했던 것 같다.(실서비스가 아님에도...) 라이브러리마다 구현하려는 것과 목적은 비슷하거나 동일하다. 이제는 사용법과 구조가 익숙해졌으니 프로젝트의 주요 기능에 따라 적합한 방법을 선택할 수 있을 것이라 기대한다.
Structure
다른 방법들과 비교해보았을 때, 구조가 간단하다는 것이 확실히 느껴진다. 처음 적용할 때는 state를 쓸 때는 이렇게, setState를 쓸 때는 이렇게 중구난방으로 막 갖다 붙이는 느낌이 들어서 살짝 거부감이 느껴졌었는데(Flux 패턴에 익숙했을 때) atoms 관리만 잘하면 전역으로 공유하는 useState 같은 느낌으로 사용할 수 있을 것 같다.
Note
사용법
1. 클라우드 생성
import { RecoilRoot } from "recoil";
function App() {
return (
<RecoilRoot>
<App/>
</RecoilRoot>
);
}
export default App;가장 상위 컴포넌트를 RecoilRoot를 이용해 감싼다. 다른 라이브러리들의 Provider와 같은 역할을 한다. 차이점은 별도의 prop이 필요하지 않다.
2. atom 생성
const sectionList = [
{
id: uuidv4(),
type: null,
name: "선택",
title: null,
itemList: null,
},
];
export const sectionState = atom({
key: "section",
default: sectionList,
});
atom을 구성하는 것은 key와 default(초기값)이다. 별도 파일로 구분을 해두어도 무관하다. 이제 사용할 준비가 끝났다.
3. 사용하기
Recoil이 제공하는 주요 API 중 3가지만 알아도 전역 상태를 관리할 수 있다.
useRecoilState
-useState와 비슷한 구조를 갖는다.const [section, setSection] = useRecoilState(sectionState);
useRecoilValue
-값만 사용한다.const section = useRecoilValue(sectionState);
useSetRecoilState
-set함수만 사용한다.const setSection = useSetRecoilState(sectionState);
