저번 블로깅에서 리코일과의 만남과
key
에 대한 이야기를 했다.
이어서 리코일에 대해서 알아가는 시간을 갖으면서 시리즈 형식으로 블로깅을 하려고 한다.
오늘은 겉핡기의 1장으로 Recoil의 등장과 Recoil에서 직접 사용해본 6가지 RecoilRoot
, atom
, useRecoilState
, useResetRecoilState
, useSetRecoilState
그리고 useRecoilValue
를 이야기 할 예정이다.
Recoil은 기존 상태 방법의 불만에서 그 불씨가 점화되었다.
우리가 기존에 React에서 주로 사용한 상태관리 방법은 다음과 같이 크게 2가지이다.
Redux는 뛰어난 User Pool과 뛰어난 Dev tool의 존재 두 가지 만으로 가장 뛰어난 상태 관리 라이브러리라고 자부 할 수 있다.
지금은 RTK가 등장함으로써 이전보다 Boilerplate code가 압도적으로 감소했지만 아직 초기 세팅이 번거로운것은 사실이다.
Context API는 상태관리 도구라기 보단 react의
prop-driliing
을 우회하는 도구라고 할 수 있지만, 상태를 전역으로 보낼 수 있으므로 상태관리 도구 분야에 살짝 포함시켰다.
이전 블로깅에서 언급한 것처럼 상태값을 변경하면, 자식요소들 전체가 재 렌더링하는 문제가 있다.
import { RocilRoot } from 'recoil';
const AppRoot = () => {
return (
<RecoilRoot>
<ComponentThatUsesRecoil />
</RecoilRoot>
);
}
key
는 고유한 값으로 중복되면 에러가 일어난다. 보통 함수명과 똑같이 사용한다.export const someState = atom({
key: 'someState', // 고유한 키값
default: 'defaultValue' // 초기값
});
string
을 사용지만 object
, array
등도 사용할 수 있다. useRecoilState
는 기본적으로 React Hook중의 대표인 useState
와 동일하다.useState
와 차이점은 변경된 상태가 전역적으로 공유된다.useState
에 default value를 넣는 곳에 useRecoilState
는 atom
을 넣으면 된다.const [fontSize, setFontSize] = useRecoilState(fontState);
return (
<button onClick={() => setFontSize((size) => size + 1)} style={{fontSize}}>
Click to Enlarge
</button>
);
useRecoilState
를 사용하다가 뜻밖에 문제에 부딪혀서 고생을 했었다.
여러개의 input들 상태 관리하기에서 보고 자주 사용하는 방법이었는데 object
로 여러개의 input들을 관리하는 상황에서 문제가 발생했다.
상태object
한 가지 상태를 바꾸니 다른 상태는 default value로 돌아오는 문제였다.
setState
에서 함수를 받는 방식이 useRecoilState
도 그대로 적용이 되어서 prevState
를 사용해서 해결했다.useResetRecoilState
는 주어진 상태를 default
값으로 리셋하는 함수를 반환한다.recoil
에서 가장 재밌는 기능이었다.import { someState } from '../atoms/someState';
const ResetButton = () => {
const resetState = useResetRecoilState(someState);
return <button onClick={resetState}>Reset</button>;
};
useRecoilState
에서 읽기 기능(useRecoilValue
)과 쓰기 기능(useSetRecoilState
)을 분리해 놓았다고 생각하면 된다.