redux는 이미 많은 개발자가 사용하는 상태 관리 라이브러리이다. React의 상태 관리 라이브러리는 한 가지 고려할 점이 있는데, 일반적인 상태와 같이 새로고침 시 상태가 사라진다. 이것을 해결하기 위해서 local 또는 session 을 사용해서 reducer를 저장해서 새로고침 시 데이터를 redux에 가져올 수 있다. 다음과 같은 기능을 redux-persist가 제공해준다. 설치 yarn add @reduxjs/toolkit react-redux redux-persist reduxjs/toolkit과 react-redux는 redux를 사용하기 위해서 설치했고 redux-persist는 따로 설치해야 한다. 만약 타입스크립트를 사용한다면, yarn add -D @types/redux-persi..

앞서 Context API에 대한 글을 몇개 작성했다. 하지만 결국 Context API를 언제 사용해야 하는지 이런 부분에 대해서는 결론에 도달하지 못했다. Redux vs Context 는 정말 많은 이야기가 있지만 정작 어떤 경우에 어떤 것을 사용해야 좋을지 모른 상태에서 그저 " 사용 " 하고 있었다. 이번에는 근복적인 내용으로 Context와 Redux가 무엇이고 어떻게 사용해야하고, 어떻게 다른지, 언제 사용해야하는지 결론을 정리하려고 한다. React Context란? 일반적인 React 애플리케이션의 데이터는 위에서 아래로 Props를 통해서 전달되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 경우 번거로울 수 있다. context를 사용하면 트리 단계마다 명시적으로 props를..

들어가며 이번에는 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 =..

들어가며. 이 글은 최대한 Redux의 공식 홈페이지를 토대로 Redux를 정리 및 이해하려고 한다. 동기. 자바스크립트 싱글 페이지 애플리케이션이 갖추어할 요건이 점점 더 복잡해지고있는 만큼, 어느 때보다도 많은 상태를 자바스크립트 코드로 관리할 필요가 생겨났습니다 상태에는 서버 응답, 캐시 데이터, 지역적으로 생성해서 사용하고 있지만 아직 서버에 저장되지 않은 데이터를 의미 실제로 프론트엔드를 개발하다보면 생각보다 많은 곳에서 State를 사용해야한다. 예를들어, 작은 모달창을 화면에 나오게 하기 위해서도 isModal 과 같은 상태를 만들어준다. 항상 변하는 상태를 관리하기란 어렵습니다... 상태를 언제, 왜, 어떻게 업데이트할지 제어할 수 없는 지경에 이르고 맙니다. 그렇다. 부모 컴포넌트에서 자..

Flux? Flux는 페이스북에서 클라이언트 사이드 웹 애플리케이션을 만들때 사용한 애플리케이션 아키텍쳐이다. 단방향 데이터 흐름을 활용해서 뷰 컴포넌트를 구성하는 리액트를 보충해주는 역할을 합니다. 구조와 데이터 흐름 Flux에서의 데이터는 앞에서 말한 것처럼 단방향으로 흐른다. view는 사용자의 상호작용에 따라 응답을 위해서 새로운 Action을 만들어서 다시 전파를 하게 된다. 이렇게보면 단방향(?)이라는 부분이 이해가 안될 수 있지만, 결국 Action은 대부분의 상황에서는 View의 사용자 상호작용으로 Action이 발생하게 된다. 모든 Action은 Dispatcher에게 가게 되는데, Dispatcher는 Store에 적용하기 위한 콜백을 실행한 다음 결과를 Store에 전달한다. Stor..