상태관리 썸네일형 리스트형 React Project ) Slack Clone, 채널, 채팅 안녕하세요. 프론트를 공부하고 있는 비전공자 에디터 M입니다. 저번시간에 이어서 Slcak Clone 코딩 세번째 이야기!! Slack Clone 코딩은 다음이야기가 마지막이 될거 같네요. 아마 해당 프로젝트 리뷰가 끝나면 다음시간부터는 프로젝트가 아닌 Three.js 공부에 관한 블로그 글을 작성 할 것 같아요. 왜냐면 요즘 Three.js쪽에 너무 관심이 많이가네요. 꽤 재밌는거 같아요. 이전편을 못보신 분들은 아래의 링크를 남겨 놓을께요. Slack Clone 1편 2023.06.28 - [공부일지/project] - React Project ) Slack Clone, 회원가입 페이지, 로그인 페이지 만들기, redux React Project ) Slack Clone, 회원가입 페이지, 로그인 페.. 더보기 비전공자의 공부일지 - Zustand 맛보기 Zustand란?? Zustand는 간단한 상태관리 솔루션이라고 한다. Zustand는 독일어로 State(상태)를 뜻하고 Jotai 및 React 스프링 개발자가 구축한 빠르고 확장 가능한 상태 관리 솔루션이다. 보일러 플레이트를 많이 최소화시켰다고 한다. 상용구 코드 감소 Zustand는 상태 값이 변경될 때만 구성 요소를 렌더링 하고 구성 요소를 다시 렌더링 하지 않고도 상태 변경을 처리할 수 있는 경우가 많다. 상태 관리는 중앙 집중식이며 단순하게 정의된 작업을 통해 업데이트된다. 이 부분에서 Redux와 유사하지만 개발자가 상태를 처리하기 위해 Reducer, Action 및 Dispatch를 만들어야 하는 Redux와 달리 Zustand는 훨씬 쉽다. Hooks를 상용하여 상태를 상용한다. 컨.. 더보기 비전공자의 공부일지 - Recoil 이란? Recoil이란??? Recoil 은 React 애플리케이션을 위한 상태관리 라이브러리입니다. Recoil은 Github에 14,000개 이상의 별이 있는 오픈 소스 상태관리 라이브러리이며 Facebook의 소프트웨어 엔지니어인 Dave McCabe가 발명했습니다. React 애플리케이션의 모든 구성 요소가 상태를 쉽게 공유할 수 있도록 전역 상태를 제공하며 Redux에 비해 최소화됩니다. React에 offical 라이브러리는 아니라고 한다. 하지만 Facebook에서 만든 거라 React와 호환이 잘된다고 한다. Recoil 공식사이트에 가면 간단한 사용 방법예제라고 있는데 이번엔 그걸 만들어 볼 생각이다. https://recoiljs.org/ko/docs/introduction/getting-st.. 더보기 비전공자의 공부일지 - Mobx todo앱 만들기 Mobx로 앱만들기 Mobx로 간단한 todo 앱을 만드는 프로젝트를 했다. 이번에는 TypeScript로 작업을 진행하였다. 아직 TypeScript에 대해 익숙하지 않아서 내용을 잘못 적을 때도 있다. CRA 할 때 --template typescript 해서 설치하였다. UI 세팅전에 todoStore을 만들었다. todoStore.tsx import { action, computed, makeObservable, observable } from "mobx"; interface TodoItem { id: number; title:string; completed:boolean } export default class TodoStore{ todos:TodoItem[] = [] constructor(){.. 더보기 비전공자의 공부일지 - Mobx Mobx란?? Mobx는 Redux이후 React 개발자들이 많이 사용하는 상태관리 라이브러리라고 한다. Mobx는 간단하고 확장 가능한 상태 관리, 쉽고 확장성 있게 만들어 주는 검증된 라이브러리라고 소개되어있다. https://ko.mobx.js.org/README.html MobX에 대하여 · MobX ko.mobx.js.org Mobx 5 버전에서는 데코레이터가 권장되었다고 한다. class TodoList{ @observable todos = [] @computed get unfinishedTodoCount () { return this.todos.filter((todo) => !todo.finished).length } } 나는 지금 6 버전으로 공부하고 있지만 5 버전도 한번 알아두면 좋을 .. 더보기 이전 1 다음
