리액트 recoil 사용법 예시
Introduction
Recoil은 페이스북에서 개발한 상태 관리 라이브러리입니다. 기존의 Redux나 MobX와 같은 라이브러리와 비교했을 때, Recoil은 간단한 API와 유연한 상태 관리 방식으로 더욱 쉽게 상태 관리를 할 수 있도록 도와줍니다. 이번 글에서는 Recoil의 사용법과 예시를 살펴보겠습니다.
Recoil 사용법
Recoil을 사용하기 위해서는 먼저 recoil 패키지를 설치해야 합니다. 아래의 명령어를 사용하여 설치할 수 있습니다.
bash npm install recoil
다음으로, Recoil을 사용할 컴포넌트에서 RecoilRoot를 import하고, 컴포넌트를 <RecoilRoot>로 감싸주어야 합니다.
javascript import React from 'react'; import { RecoilRoot } from 'recoil';
function App() { return ( {/ _Recoil을 사용하는 컴포넌트들_ /} ); } 이제 Recoil을 사용할 준비가 되었습니다. Recoil에서는 atom과 selector를 사용하여 상태를 관리합니다.
Atom
Atom은 상태의 단위입니다. atom 함수를 사용하여 새로운 atom을 생성할 수 있습니다.
javascript import { atom } from 'recoil';
const counterState = atom({ key: 'counterState', default: 0, });
위의 코드에서 counterState는 atom의 이름이며, default는 atom의 초기값을 설정합니다. 이제 counterState를 사용하여 컴포넌트에서 상태를 관리할 수 있습니다.
javascript import { useRecoilState } from 'recoil';
function Counter() { const \[count, setCount\] = useRecoilState(counterState);
const handleClick = () => { setCount(count + 1); };
return (
Count: {count}
Increment
); }
Selector
Selector는 atom을 가공하여 새로운 값을 만드는 함수입니다. selector 함수를 사용하여 새로운 selector를 생성할 수 있습니다.
javascript import { selector } from 'recoil';
const doubledCountState = selector({ key: 'doubledCountState', get: ({ get }) => { const count = get(counterState); return count \* 2; }, });
위의 코드에서 doubledCountState는 selector의 이름이며, get 함수 내부에서 counterState의 값을 가져와서 두 배로 만들어 반환합니다. 이제 doubledCountState를 사용하여 컴포넌트에서 가공된 값을 사용할 수 있습니다.
javascript import { useRecoilValue } from 'recoil';
function DoubledCount() { const doubledCount = useRecoilValue(doubledCountState);
return
Doubled count: {doubledCount}
; }
Conclusion
Recoil은 Redux나 MobX와 같은 상태 관리 라이브러리보다 더욱 간단하게 상태를 관리할 수 있도록 도와줍니다. atom과 selector를 사용하여 간단한 API로 상태를 관리할 수 있으며, 이를 통해 코드의 가독성과 유지보수성을 높일 수 있습니다. 이번 글에서는 Recoil의 사용법과 예시를 살펴보았습니다.
댓글