flux pattern

Flux는 사용자 입력을 기반으로 Action을 만들고 Action을 Dispatcher에 전달하여 Store(Model)의 데이터를 변경한 뒤 View에 반영하는 단방향의 흐름으로 애플리케이션을 만드는 아키텍처입니다. 구조는 다음의 그림과 같습니다.하지만, 모든 상태

저번에 Context API 로 전역적으로 값을 사용하는 법을 배웠습니다.이번에는 사용하는 것 뿐만아니라, 값을 변경하는 법을 배워보겠습니다.저번 처럼 기본적인 Provider 가 아닌, 많은 기능을 가진 context를 만들기 위해서는 Custom Provider 에

Flux 패턴에서 자주 쓰이는 reducer, dispatch 등을 useReducer를 사용해서 알아보겠습니다.먼저 counter 컴포넌트를 만들어 보겠습니다.useState 로 만들어진 컴포넌트를 useReducer 를 사용해서 리팩토링 해보겠습니다.실행결과는 완벽

flux 패턴을 가장 잘 적용시킬 수 있는 redux 에 대해서 배워보자가장 먼저 리덕스 툴킷을 react 프로젝트에 설치해주겠습니다.다음으로 리덕스 스토어를 만들어 주겠습니다. store 폴더의 index.js 파일에 루트 스토어를 만듭니다.위의 코드에서 songsR

리덕스 툴킷사용법을 간단한 프로젝트를 통해서 알아봅시다.데이터를 입력할 수 있는 form 이 있고, search 와 delete 가 가능한 간단한 프로젝트 입니다.프로젝트에서 필요한 slice 는 다음과 같습니다.form 을 입력하기 위한 Form Slice 와 데이터

https://github.com/hi6724/redux-study/commit/e2a629d54d947f5215bb86b164210eb4fe29471b이번에는 이어서, CarForm 컴포넌트를 만들고, 어떻게 redux 의 값을 가져오는지 알아보겠습니다.re

https://github.com/hi6724/redux-study/commit/5eef6e41c55a3cde3c4ba782df0979c7e1ebe784redux-toolkit 의 extraReducer 에 대해서 알아보자!이전의 코드를 보면, onSubmit