Recoil 로 Global state management 글로벌 상태관리를 해보자!

🌈 다크모드와 라이트모드 전환을 위한 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(',')}
    </>
  );
}