-
Recoil 로 Global state management 글로벌 상태관리를 해보자!React/Recoil 2023. 3. 6. 18:44
🌈 다크모드와 라이트모드 전환을 위한 state 설정을 위해 recoil을 이용해보자
📌 recoil 설치방법
npm install recoil
📌 atoms.ts
import { atom } from "recoil"; export const isDarkAtom = atom({ key: "isDark", default: false, });
📌 App.tsx
useRecoilValue(isDarkAtom) 을 통해 초기값인 false 를 가져올 수 있다.
import { isDarkAtom } from "./recoil/atoms"; import {useRecoilValue} from "recoil" ...(중략) function App() { const isDark = useRecoilValue(isDarkAtom) return ( <> <ThemeProvider theme={ isDark ? darkTheme : lightTheme}> <GlobalStyle /> <Router /> <ReactQueryDevtools /> </ThemeProvider> </> ); } export default App;
📌 atom 의 값을 수정하는 방법
import { isDarkAtom } from "../recoil/atoms"; import {useSetRecoilState} from "recoil" ...(중략) const setterFn = useSetRecoilState(isDarkAtom) ...(중략) return <> // prev 라는 이전값을 역으로 바꿈 : true <button onClick={()=>setterFn((prev)=>!prev)} >ChangeMode</button> </>
📌 Recoil 공식문서 : selector 포함
import {atom, selector, useRecoilValue} from 'recoil'; const namesState = atom({ key: 'namesState', default: ['', 'Ella', 'Chris', '', 'Paul'], }); const filteredNamesState = selector({ key: 'filteredNamesState', get: ({get}) => get(namesState).filter((str) => str !== ''), }); function NameDisplay() { const names = useRecoilValue(namesState); const filteredNames = useRecoilValue(filteredNamesState); return ( <> Original names: {names.join(',')} <br /> Filtered names: {filteredNames.join(',')} </> ); }
'React > Recoil' 카테고리의 다른 글
전역상태관리 Recoil (feat.ContextAPI) 아티클 (7) 2023.05.02