Recoil

yezee·2023년 4월 22일

Recoil 라이브러리

라이브러리

목록 보기

6/8

Recoil은 react js에서 사용할 수 있는 state management library

설치

npm install recoil

사용하기

RecoilRoot

recol 상태를 사용하는 컴포넌트는 부모 트리 어딘가에 나타나는 RecoilRoot 가 필요하다. Root 컴포넌트가 RecoilRoot를 넣기에 가장 좋은 장소이다.
따라서 index파일에 RecoilRoot import해서 <RecoilRoot><RecoilRoot>로 하위 태그를 감싸준다

//index.tsx
import { RecoilRoot } from 'recoil';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <RecoilRoot>
      <QueryClientProvider client={queryClient}>
        <RouterProvider router={router} />
      </QueryClientProvider>
    </RecoilRoot>
  </React.StrictMode>
);

atom 파일 생성

atom.txs파일을 만들어준다

//atom.ts
import { atom } from 'recoil';

export const isDarkAtom = atom({
  key: 'isDark', //유니크한 ID(다른 atom와 관련해서), 저장할 state
  default: false, //기본값(초기값),state의 기본상태
});

useRecoilValue()

atom에 있는 state를 불러서 사용하는 방법
즉, value를 가져오는 방법 == useState의 state와 비슷한 역할

//app.tsx
import { useRecoilValue } from 'recoil';
import { isDarkAtom } from './atoms';

function App() {
  const isDark = useRecoilValue(isDarkAtom);
  return (
    <>
      <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
        <GlobalStyle />
        <Outlet />
        <ReactQueryDevtools initialIsOpen={true} />
      </ThemeProvider>
    </>
  );
}

export default App;

useSetRecoilState()

reciol state의 값을 업데이트하기 위한 setter함수를 반환한다
즉, function을 가져오는데, 이 function으로 value를 수정할 수 있다 ==useState의 setState와 비슷한 역할

import { useSetRecoilState } from 'recoil';
import { isDarkAtom } from '../atoms';

function App() {
   const setDarkAtom = useSetRecoilState(isDarkAtom);
  const toggleDarkAtom = () => {
    setDarkAtom((prev) => !prev);
  };
  return(
	<button onClick={toggleDarkAtom}>다크모드</button>
)}

가만있어보자 🤔🤔 useState()는 state와 state setter함수를 같이 썻는데 이건 따로따로 써야하나요??🙄 아니요 똑똑한 recoil은 다~~~있습니다~!

useRecoilState()

const [data,setData]=useRecoilState(todoSate)
data는 const data = useRecoilValue(isDarkAtom); 와 같은 역할
setData는 const setDat = useSetRecoilState(isDarkAtom); 와 같은 역할

selectors

selector은 atom을 가져다가 output을 변형할 수 있다

get
get function으로 atom을 받을 수 있다
다른 atom이나 selector로부터 값을 찾는데 사용되는 함수
set
selector의 atom의 값을 설정할 수 있도록 해줌
첫번째 매개변수는 Recoil state, 두번째 매개변수는 새로운 값(newValue)

//atoms.ts
export const hourSelector = selector({
  key: 'hours',
  get: ({ get }) => {
    const minutes= get(minuteState);

    return minutes/60
  },
  set:({set},newValue)=>{
  	const minutes=Number(newValue)*60
    set(minuteState,minutes)
  }
});