TwentyTwentyOne

overview 리덕스의 action 과 reducer를 간단하게 정의해 놓았습니다. 이제 todolist 등록하고, delete하는 기능을 적용하기 위해 reducer를 수정해 줍니다. // src\Redux\TodoList\index.js const CREATE = "todolist/ADD"; const READ = "todolist/READ"; const UPDATE = "todolist/UPDATE"; const DELETE = "todolist/DELETE"; export const onCreate = (todoItem) => { return { type: CREATE, item: todoItem, }; }; export const onRead = () => { return { type: REA..

overview 등록된 store를 통해서 todolist의 상태를 관리할수 있습니다. 스토어에 등록된 상태를 가져오는 hooks인 useSelect와 상태 변화를 일으키는 hooks인 useDispatch를 사용해 보도록 합니다. 1. dummy data UI를 만들기 위해 작성했던 dummy data를 우선 Redux-TodoList-index.js의 initialState로 옮겨 주고 TodoListReducer의 state의 default값으로 지정해 주겠습니다. // src\Redux\TodoList\index.js const CREATE = "todolist/ADD"; const READ = "todolist/READ"; const UPDATE = "todolist/UPDATE"; const ..

Overview Redux 는 기본적으로 액션 - 리듀서 - 스토어 - 상태 로 이루어져 있다고 이해하고 있다. 추가적으로 구독이나 디스패치, 미들웨어 등이 있다. 중요한 개념은 스토어에 등록된 리듀서에서 디스패치된 액션 타입 별로 상태를 변화 시켜 주는것으로 이해된다. 나는 Redux 디렉토리를 만들고 그 안에 Redux를 사용하는 프로젝트 별로 액션과 리듀서를 작성하고, CombineReducers를 index.js에 선언에 RootReducer를 Export하는 방식으로 사용할 계획을 가지고 시작한다. 1. 디렉토리 및 파일 만들기 src 디렉토리에 Redux 를 디렉토리를 만들고, 그안에 TodoList 디렉토리를 만들어 준다. 각각 index.js 파일을 만들어 준다. 그리고 webpack.co..

Overview 리액트 관련 프로젝트에서 많이 사용하는 상태 관리 라이브러리로서 Redux(리덕스)를 사용해 보면서 정리하는 글을 작성해 보고자한다. 간단한 Todo List의 상태를 Redux로 상태 관리하는 것을 통해 정리해보고자한다. 먼저, Dummy data를 통해 초기 페이지 UI를 간단하게 만들어 본다. Todo List UI 세팅 1. Data Structure TodoList에 필요한 데이터는 아이디 , 제목, 내용, 생성날짜,완료 체크 이다. 추후에 추가될수도있지만, 우선은 이포맷으로 더미 데이터 3개 정도를 만들어 준다. // ./data.js export const dummy = [ { id: 1, title: "블로그 작성", contents: "리액트 블로그 작성하기", done:..