상태관리 라이브러리 (10) 썸네일형 리스트형 [zustand] zustand 저장소 구조의 기본 템플릿(타입스크립트를 기준으로) 저스텐드(zustand)는 redux에 비해 보일러 플레이트가 적지만, 그럼에도 중앙 집중식 저장소라는 특성 상, 어느정도 기본 구조를 잡아주어야 한다. 이 글은 내가 자주 사용하는 저스텐드 기본 구조 템플릿이다. 디렉토리 위치먼저 중앙 저장소가 될 파일을 만들자.이름은 mainStore.ts로 한다.일반적인 모듈 아키텍처라면, data/store/mainStore.ts에 만든다.FSD나 도메인 레이어 아키텍처라면, 가장 하위 레이어에 만든다. 예컨대, 최하위 레이어가 shared 라면 shared/data/store/mainStore.ts 이다. data 폴더는 전역에서 공유하는 상태를 다룬다. context 혹은 zustand의 중앙저장소 및 유틸 훅을 보관한다. mainStore.ts 의 구조중앙.. [zotai] useSetAtom 타입 선언 문제. 수동 선언 문제useSetAtom을 props로 넘겨줘야 할 때, 타입 선언을 어떻게 할까.setAtom은 @type 파일에서 별도로 선언된 타입이 없다.그래서 아래처럼 수동으로 선언해야 한다.// atom 상태값interface MyAtom { foo: number; bar: string;}const switchAtom = atom({foo:1, bar:"hello"});// useSetAtom은 이런 식의 타입을 가짐type signitureSetMyAtom= (args_0: SetStateAction) => voidconst setMyAtom : signitureSetMyAtom = useSetAtom(myAtom) [zustand] zustand 컨셉 및 기본 사용법 컨셉zustand는 redux, zotai, valtio, recoil 등과 더불어 대표적인 상태 관리 라이브러리 중 하나다. zustand의 특징은 다음과 같다 flux 디자인 기반 - 중앙 집중식 상태 관리 | redux와 유사하게 state를 단일 store에서 관리하며 dispatcher는 중앙에서 정의된 메소드를 사용한다.선택적 reducer | redux는 모든 dispatch 요청을 reducer 함수 내에서 action.type에 따라 분기처리하는데 반해, zustand는 선택 사항에 따라 그러지 않을 수 있다. 대신, 여러 개의 메소드 중 하나를 선택하여 dispatch 한다.불변 상태 관리 | redux처럼 불변식 상태관리 방식을 사용하며, 복잡한 상태 관리에는 immer과 조합이 좋.. [recoil] recoil의 사용 이유 및 기본 사용법 recoil은 redux와 함께 상태 관리 라이브러리를 대표하며 배우는 것에 상당한 가치가 있다. 그 이유는시장 측면에서 redux, zutand, zotai, mobx 등과 함께 상당한 시장 점유율(비록 하락세이지만.. 그 이유는 하술 예정) recoil의 분산형 관리 방식은 redux의 중앙집중식 관리 방식과 대비되며 앱의 규모 및 팀 스타일에 따라 장단점을 가진다. 따라서, 프론트엔드는 둘을 비교 및 선택과 관리 패턴 설정 능력이 필요하다. 이 글에서는 recoil의 기본 사용법으로 atom과 selector을 다루며, 이 둘의 기본적인 사용 패턴에 대해 다룬다. 왜 상태 관리 라이브러리를 사용하는가?recoil 문법을 공부하기 이전에 이 주제를 살피고 가야 recoil을 어떻게 사용할지 생각해.. [Redux] redux의 유지 보수 및 최적화 팁 3가지 redux를 사용하면서 발생할만한 문제나 유지보수 및 최적화를 위한 방법을 몇 가지 적는다. 커스텀 셀렉터 훅 정의 컴포넌트와 redux의 store를 연동할 때는 useSelector를 사용해서 필요한 부분만 참조한다. 따라서 store의 내부 구조가 불가피하게 변경되면 컴포넌트의 useSelector에서 store를 참조하는 방식 역시 바꿔야 한다. 이 작업은 앱의 규모가 커지고 useSelector를 이용한 참조가 많을수록 번거로워진다. 이럴 때 VSC의 search & replace를 이용하면 필요한 부분을 전부 찾아 수정할 수 있지만, selector를 커스터마이징하여 참조하는 방식으로도 해결 가능하다. export const todoSelector = (state: TypeStore) => s.. [Redux] 사용법부터 이론까지 살펴보는 Redux: 5. 입문자를 위한 createSlice 기본 세팅 소개 redux는 정말 좋은 라이브러리지만, 세팅해야할 게 많다. 액션 타입을 상수로 지정하고, 액션 생성자도 만들고, 액션 타입에 맞춰서 리듀서 함수도 만들어야 하니 말이다. 다행히 redux-toolkit은 이런 반복되는 코드를 정리해주는데, 그 중 createSlice는 createAction이나 createReducer에 비해서 간결한 코드를 제공하지만, 보일러 코드를 많이 축약하다 보니 처음 봐선 구조가 쉽게 이해되지 않는다. 따라서, 이 기능의 세팅방식에 대해 살펴보겠다. 1. store 세팅 export const store = configureStore({ reducer: { }, }); export type TypeStore = ReturnType; store는 cofigureStore을 사용.. [Redux] 사용법부터 이론까지 살펴보는 Redux: 4. Redux-toolkit 리덕스는 전역 상태관리 라이브러리이자 중앙집중식 스토어로서 유용하다. 하지만, 리덕스에는 세 가지 불편함이 존재했다. store, reducer, actionCreater 등의 초기 세팅을 위해 반복적으로 많은 코드를 작성해야 한다. reducer는 불변성의 법칙에 따라 store를 변형하면 안된다. 따라서, 복잡한 state를 가공하기 위해 spread 연산자 등의 기법을 사용해서 긴 코드를 작성해야 한다. reducer을 잘 사용하기 위해 여러 라이브러리를 직접 설치해줘야 한다.(immer, reselect ...) 타입스크립트가 제대로 지원되지 않는다. 이런 불편함에 대한 대안으로서 등장한 redux-toolkit은 다음 이점을 가지고 있다. 반복적으로 작성하던 세팅을 간소하게 작성 가능 스토어 변.. [Redux] 사용법부터 이론까지 살펴보는 Redux: 3. 리엑트에서의 사용 방법 상태관리 라이브러리인 리덕스를 리엑트와 연결시키는 방법에 대해 알아보자. 세팅 redux, react-redux 일반적으로는 여기에서 보일러 플레이트를 간편하게 세팅하고 dev tool을 사용하기 위해 redux-toolkit을 추가한다. 하지만, 여기서는 리엑트에 리덕스를 연결시키는 방법에만 집중하기 위해 다음 기회에 다루겠다. 스토어 생성 및 앱에 바인딩하기 provider provider은 react-redux가 제공하는 컴포넌트다. 이걸로 리엑트 컴포넌트를 감싸주면, 해당 컴포넌트에서 리덕스 스토어를 가져오고 dispatch 할 수 있다. //@ 리덕스 스토어를 세팅한 후, Provider 앱에 import const root = ReactDOM.createRoot(document.getEleme.. 이전 1 2 다음
