Project/JavaScript Project

sagen npm sagen Management global state with out provider www.npmjs.com 규모가 큰 앱을 개발할 때 props drilling을 피하기 위한 목적으로, 상태가 변경하는 것을 직접 모니터링하기 위한 목적으로 또는 그 외의 이유로 상태 관리 라이브러리를 사용하곤 합니다. 또한, 상태 관리 라이브러리를 사용하지 않고 ContextAPI를 사용하는 경우도 있습니다(이 경우, ContextAPI는 타 상태 관리 라이브러리와 달리 렌더링 최적화가 이루어지지 않음을 인지하고 설계되어야 합니다). 위와 같이 이미 많은 상태 관리 라이브러리가 존재하며, 새로운 라이브러리가 종종 등장합니다. 본 글에서는 상태 관리 라이브러리 중 하나인 sagen에 대해서 알아보도록 ..

[React] 전역 상태 관리 라이브러리 제작기 (3) [React] 전역 상태 관리 라이브러리 제작기 (1) [React] 전역 상태 관리 라이브러리 제작기 (2) 위 포스트에서 작업한 전역 상태 관리 라이브러리에 useReducer와 같이 reducer 함수를 전달받아서 dispatch action으로 상태를 관리하는 구조를 추가하도록 하겠습니다. Redux의 상태관리 Redux는 아래와 같이 작성해서 상태 관리를 할 수 있습니다. import { createStore } from 'redux' function counterReducer(state = { value: 0 }, action) { switch (action.type) { case 'counter/incremented': return { ..

[React] 전역 상태 관리 라이브러리 제작기 (2) 이전 글 보기 [React] 전역 상태 관리 라이브러리 제작기 (1) 개선되어야 하는 부분 이전 작업의 내용만 갖고도 전역 상태 관리를 할 수 있습니다. 하지만, 복잡한 데이터를 다루는 것에 용이하지는 않습니다. 그 이유는 Context API와 같이 객체 또는 배열 데이터를 저장한다면 === 연산자로 비교할 수 없어 데이터가 변경되지 않았음에도 리렌더링이 발생하기 때문입니다. 이 이유는 제가 Context API를 사용하지 않고 전역 상태 관리 라이브러리를 만들기로 결심한 이유가 되기도 합니다. 또한, useState의 setState를 사용하면 함수를 넘길 수 있는데, 함수의 첫 번째 인자로 현재 값을 받아올 수 있습니다. 이를 이용해 Hook의..

전역 상태 관리 라이브러리 제작기 (1) 이전부터 '전역 상태 관리 라이브러리를 만들어보고 싶다'라는 생각을 갖고 있었습니다. 최근 Context API와 Redux의 구조가 어떻게 이뤄져 있는지에 대해 알아본 뒤 전역 상태를 관리하는 흐름에 대해 대충 알게 되어서 이를 활용해 라이브러리를 제작해보려 합니다. 라이브러리 설계 Context API를 사용하지 않고 상태 관리를 하도록 작성할 예정입니다. 또한 store가 생성될 때 store에서 데이터를 갖고 있도록 하여 Provider 없이 사용 가능하도록 하려 합니다. Provider가 없는 상태 관리에 대해서는 zustand 상태 관리 라이브러리를 보고 아이디어를 얻었습니다. 필요한 요소 상태 관리 라이브러리를 만든다고 할 때, 제대로 동작하기 위해서..