들어가며 이번에는 Todo 리스트 애플리케이션을 만드려고 한다. 만들 기능으로는 ▶ Todo 아이템 추가 ▶ Todo 아이템 수정 ▶ Todo 아이템 삭제 ▶ Todo 아이템 필터링 ▶ 통계 표시 Todo를 만들면서 Recoil의 atoms와 selectors, atom families와 Hook 그리고 최적화를 다루게 될 것이다. Atoms TodoList 컴포넌트 import { atom, useRecoilValue } from "recoil"; export const todoListState = atom({ key: "todoListState", default: [], }); const TodoList = () => { const todoList = useRecoilValue(todoListStat..

들어가며 앞서 시작하기를 통해서 Recoil에 대해서 알아봤다. 이번에는 실제 React에서 어떤 방식으로 Recoil을 사용하는지 알아보려고 한다. 환경 세팅 npx create-react-app recoil 먼저 React 프로젝트가 필요하기 때문에 간단하게 CRA를 사용해서 환경을 만들었다. yarn add recoil 당연히 recoil 패키지가 필요하기 때문에 최신 버전을 설치했다. RecoilRoot // App.jsx import { RecoilRoot } from "recoil"; function App() { return ( Recoil Study ); } export default App; Redux에서 Provider를 사용해서 Redux를 사용할 컴포넌트를 나타냈는데, Recoil도..

들어가며 요즘 Recoil이라는 친구가 핫하길래 이번에 공부를 하려고 한다. 먼저 공식 사이트에서 Recoil에 대해서 알아보고 시작하기를 통해서 환경을 세팅해볼 계획이다. Why Recoil ? 전역 상태 관리에서 가장 유명한 라이브러리는 Redux일 것이다. 그런데 왜 Recoil을 요즘 이곳 저곳에서 도입하려고 할까? 그러려면 Redux를 사용했을 때의 단점을 한번 생각해봐야 할 것이다. 1. 거대하다! Redux으로 상태 관리를 하려고 할 때 작성자가 느끼는 가장 큰 부담감은 너무 크다는 것이다. 상태를 관리하기 위해서 Store를 만들고, 그거에 맞춰서 Action, Reducer , .... 사용하기 위해서 준비해야하는 것이 많다고 느껴진다. 2. 어렵다! 사실 위 " 거대하다! " 와 이어지..

일반적으로 전역 상태 관리를 위해서는 Redux와 같은 전역 상태 관리 라이브러리를 사용한다. 이때 Context API를 왜 사용하지 말라는 부분을 정리된 글을 많이 봤다. 하지만 이것을 직접 테스트하지 않았기 때문에 이번에 비교를 해보려고 한다. ( 머리로만 이해하는 것과 눈과 손을 함께 사용하는 것 중 후자가 더 좋을 테니 ㅎㅎ ) 작업 Redux 사용하는 패키지는 react-redux, @reduxjs/toolkit 간단한 테스트를 하기 때문에 기본적인 패키지만 사용했다. // /reducer/counter.js import { createSlice } from "@reduxjs/toolkit"; const initialState = { value: 0, }; const counterSlice =..