JS' 공부흔적

이전 글에 이어서 이번에는 createReducer에 대해 작성하겠다. 이전 글에서 다뤘던 createAction은 Redux의 action을 간편하게 만들 수 있는 것이었다면, createReducer도 마찬가지로 reducer를 간편하게 만들 수 있는 방법이다. createReducer TodoList 코드를 기준으로 보면 기존의 reducer를 생성하는 방법은 아래와 같다. const reducer = (state = [], action) => { switch (action.type) { case addTodo.type: return [...state, { text: action.payload, id: Date.now() }] case deleteTodo.type: return state.filte..

이 글은 Redux의 기본 개념에 대해 알고 있다고 가정하고 진행한다. Redux에 대해 잘 모른다면 아래 글을 참고하면 좋을 듯! [Redux] Vanilla Redux의 기본 개념 Redux는 Javascript의 상태 관리 라이브러리이다. 보통 React와 함께 많이 사용되지만, Augular, jQuery, vanilla JavaScript 등 여러 framework에서 사용이 가능하다. Redux에 기본적인 개념 및 용어를 알아보자... 2junsu.tistory.com 또한 이전 글에서 다뤘던 TodoList 코드를 가지고 진행되니 React Redux (1), (2) 먼저 보고 오길 바란다. [React Redux] React에서 Redux를 사용해보자(1) 이 글은 Redux의 기본 개념에..

이 글은 아래 글의 후속편이니 아래 글부터 보고 오는 것을 추천한다. [React Redux] React에서 Redux를 사용해보자(1) 이 글은 Redux의 기본 개념에 대해 알고 있다고 가정하고 진행한다. 개념을 잘 모른다면 아래 포스팅을 참고하면 좋을 듯! [Redux] Vanilla Redux의 기본 개념 Redux는 Javascript의 상태 관리 라이브러리이 2junsu.tistory.com 이제 추가 기능을 구현했으니 삭제 기능을 구현해보자. 삭제 기능에서 해야할 것은 특정 할 일에 붙어있는 삭제 버튼을 누르면 해당 할 일을 삭제하는 것이다. 따라서 특정 할 일에 대한 id가 필요하다. 그 후 할 일들이 저장된 배열을 돌면서 해당 id를 가지는 할 일을 제외한 나머지를 새로운 배열에 넣은 후..

이 글은 Redux의 기본 개념에 대해 알고 있다고 가정하고 진행한다. 개념을 잘 모른다면 아래 포스팅을 참고하면 좋을 듯! [Redux] Vanilla Redux의 기본 개념 Redux는 Javascript의 상태 관리 라이브러리이다. 보통 React와 함께 많이 사용되지만, Augular, jQuery, vanilla JavaScript 등 여러 framework에서 사용이 가능하다. Redux에 기본적인 개념 및 용어를 알아보자.. 2junsu.tistory.com 할 일을 추가하고 삭제할 수 있는 간단한 Todo List를 구현하면서 React에서 Redux를 사용하는 법을 알아보자. 이 글에서는 '추가' 기능을 구현한다. 또한 Redux에 익숙해지기 위한 글이므로 Local Storage는 사용..

Redux는 Javascript의 상태 관리 라이브러리이다. 보통 React와 함께 많이 사용되지만, Augular, jQuery, vanilla JavaScript 등 여러 framework에서 사용이 가능하다. Redux에 기본적인 개념 및 용어를 알아보자. npm install redux yarn add redux 1. Store Store는 state가 저장되는 공간이다. state는 변경되는 데이터를 말한다. 버튼을 누르면 숫자가 1 증가하거나 감소하는 프로그램이 있다고 할 때, 여기에서의 state는 변경되는 숫자이다. 이러한 state들을 저장하는 곳이 store이다. store는 아래와 같이 생성한다. import { createStore } from 'redux' const store =..