Recoil
-
전역상태관리 Recoil (feat.ContextAPI) 아티클React/Recoil 2023. 5. 2. 21:05
0. 본격적인 Recoil 소개에 앞서 Recoil, ContextAPI 같은 전역상태관리 툴을 왜 사용하는 걸까? 프론트엔드에서 상태(State)란 컴포넌트 내부에서 관리되며 웹앱의 렌더링에 영향을 미치는 객체이다. 처음 리액트 앱을 npm에서 실행하면 couter가 시작되는데 여기서 + 를 누르면 증가하고 -를 누르면 감소하는 그 "숫자" 가 바로 상태의 형태로 관리된다는 말이다. 상태의 종류에는 총 3가지로 나눌 수 있는데 지역상태 : 하나의 컴포넌트 내부에서만 관리되는 상태로 , 해당 상태를 다른 컴포넌트들과 공유하지 않는다. 컴포넌트 간 상태 : 하나의 상태를 여러가지 컴포넌트에서 사용되고 변경되며 관리되는 모습을 보여준다. 이러한 상호작용을 위해 바로 "Prop Drilling" 의 방식을 사..
-
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(isDa..