상태 관리 라이브러리

8.1.1 버전react project를 만들면서 규모가 커질수록 관리해야할 state가 많아지고 이를 체계적으로 관리하는 것이 필요하다. 이때, 개발자는 상태관리 라이브러리를 사용하여 state를 효율적으로 관리할 수 있다.예측 가능한 상태 변화대부분의 상태 관리 라

설치 전용 템플릿 설치법 js 전용 $ npx create-react-app [프로젝트명] --template redux ts 전용 $ npx create-react-app [프로젝트명] --template redux-typescript 기존 react 프로젝

앞서 제작한 redux 세팅을 component에 적용하기 전에, 복습 및 숙지해야할 몇가지 중요한 개념이 있다.redux의 state은 Immutable 하다state를 변경할 때, react에서 하는 작업은 직접적으로 값을 '변경'하는 것이 아닌, 값을 '대체' 한

react-redux에는 zombie children이라는 버그가 발생할 수 있다. 이는 부모-자식간 component의 render 순서와, store의 상태에 따라 selector에서 발생할 수 있는 에러이다. 최신 버전에서는 그나마 해결되었지만, 발생할 수 있는

Recoil은 react-redux와 더불어 react의 중앙 전역 상태 관리를 지원해주는 라이브러리이다. 컴포넌트 간에 상태를 공유하고 상태 변경을 추적하는 데 사용된다. 다른 라이브러리와 달리 recoil은 react와 같은 facebook에서 개발한 상태 관리

recoil에서 사용하는 주요 개념들을 간략하게 설명하자면,RecoilRootrecoil을 사용하기 위해서는 애플리케이션의 최상위 컴포넌트에서 RecoilRoot 컴포넌트를 사용해야 한다. 이 컴포넌트는 recoil 상태와 상태 업데이트를 관리하는데 필요한 컨텍스트를

Selector는 atoms나 다른 selectors를 입력으로 받아들이는 순수함수이다. 파생된 상태의 일부를 나타내며 파생된 상태를 어떤 방법으로든 주어진 상태를 수정하는 순수 함수에 전달된 상태의 결과물이다. 파생된 상태는 다른 데이터에 의존하는 동적인 데이터를

recoil에서는 비동기적인 API호출도 가능하다. recoil은 데이터 플로우 그래프를 통해 상태를 매핑하는 방법과 파생된 상태를 react component에 제공한다. 이러한 플로우에 속한 함수들은 물론 비동기가 될 수도 있다. 이는 비동기 함수들을 동기 reac

atomFamily selectorFamily와 비슷하게 atomFamily도 인자를 받아와서 상황별로 로직을 정해주는 기능을 한다. atomFamily를 호출하면 전달한 매개변수에 따라 recoil state를 제공하는 함수를 반환한다. atomFamily는 매개

Mobx MobX는 React와 함께 사용하는 상태 관리 라이브러리로, 애플리케이션의 상태를 관리하고 변화에 따라 UI를 업데이트하는데 도움을 주는 간단하고 강력한 라이브러리이다. MobX는 관찰 가능한 상태(Observable State)를 만들어두고, 이 상태에 의

기본 사용법

이제 다음과 같이 조금 더 복잡한 observer store를 만들어보겠다. 이번 예제에서는 TodoList에 대해서, 할일 목록들의 CRUD(Create / Read / Update / Delete)를 할 수 있도록 하였다. 또한 수행 여부와 다음 할일을 가르쳐주고,

reactions observer state에서 업데이트가 일어난 후 추가으로 발생하는 side effect이다. 이 reactions에는 대표적으로 앞전 포스트에서 다룬 autorun이 있다. 그 외에도 reaction과 when 에 대해서도 살펴보자. reacti