리덕스 (6) 썸네일형 리스트형 개인 프로젝트(React) : 지출 내역 리스트 -7 Redux useContext => Redux (Redux ToolKit 사용)가이드를 보기 전 일단 내 블로그에 정리한 Redux를 보고 해봤다.1. 리덕스 및 RTK 설치터미널yarn add redux react-reduxyarn add @reduxjs/toolkit 2. 폴더 구조 생성src폴더에 redux폴더 생성 후 redux폴더에 config폴더와 slices폴더 생성config폴더에 configStore.js 파일 생성slices폴더에 expense.js 및 listMonth.js 파일 생성생성한 store를 main.jsx에 주입 expense.jsimport { createSlice } from "@reduxjs/toolkit";const initialState = { expenses: [... .. React: Redux - 5 RTK 01. RTK (Redux ToolKit)이란리덕스툴킷의 개념리덕스 툴킷은 이전에 배운 리덕스를 개량한 것더 적은 코드, 더 편하게 리덕스를 사용하기 위한 기능들 흡수기존 리덕스와 다른 점은 모듈 파일 뿐02. 일반 리덕스와 코드 비교툴킷 설치터미널yarn add @reduxjs/toolkit redux 폴더에 하위 폴더 slices 생성counter 프로그램 코드 비교기존의 코드에서는 modules 폴더 내부의 counter.js 파일에서Action Value, Action Creator, Reducer를 하나하나 직접 코드를 작성해 생성해줘야했음const initialState = { number: 0,};const ADD_NUMBER = "ADD_NUMBER";const REMOVE_NUMBER .. React Redux - 4 Redux 기반 TodoList 만들기 (추가기능) Redux Todolist 만들기1. Redux 설치yarn add redux react-redux2. todos 모듈 생성 및 store 구성redux 폴더 생성 => config 폴더, modules 폴더 생성 => cofigStroe.js (store), todos.js (todos모듈) 생성 todos.jsconst todos = () => {};export default todos; configStore.jsimport { combineReducers, createStore } from "redux";import todos from "../modules/todos";const rootReducers = combineReducers({ todos,});const store = createStor.. React: Redux - 3 action creators, action values, payload, Ducks 패턴 01. Action Creator액션 객체의 value를 변경할 일이 생긴다면(액션객체의 type을 바꿔야한다면)counter앱을 예로 액션객체 PLUS_ONE, MINUS_ONE이 counter 모듈 안에 있다는 것을 강조하기 위해counter/PLUS_ONE, counter/MINUS_ONE 으로 변경하고자 할 때,총 4군데(App.jsx dispatch 2군데, counter.js reducer 2군데)를 바꿔줘야함프로젝트 규모가 클수록 번거롭고, 오류 발생 가능성 증가 액션객체를 한 곳에서 관리할 수 있도록 함수와 액션 타입을 상수로 만듦counter.jsconst initialState = { number: 0,};const PLUS_ONE = "PLUS_ONE";const MINUS_ONE .. React: Redux - 2 counter앱, redux 사이클, dispatch 01. redux 흐름counter앱의 조회 기능까지 => counter앱을 완성시키기 위해서는 store에 있는 값 수정 기능 필요 => redux와 사이클흐름view에서 액션이 일어남에 따라 store에 있는 state가 변경되면 페이지에 리렌더링이 일어나며 화면에 보여짐 (컴포넌트와 동일)store내부의 state의 변화는 dispatch를 이용해서만 이루어져야함dispatch는 '액션객체'를 reducer로 전달reducer로 전달된 액션객체의 타입에 따라서 reducer는 적절한 처리 => store에 새로운 값 저장store의 값이 변함에 따라 view 갱신02. counter.js 모듈의 state 수정 기능 (+1 기능 구현)Focus onApp.jsx에서 액션객체를 counter.js의 .. React: Redux - 1 소개 및 설정 01.Redux 소개전역상태 라이브러리 Redux필요성1. useState 자체로만으로 개발하기에는 불편함어떤 컴포넌트에서 생성한 state를 다른 컴포넌트로 보낼 때 props 이용props를 사용할 때 불편한 점 : props drillingRedux는 useContext와 유사하게 전체 영역에서 특정 경로, 위치에있는 '스토어(Store)'에서 데이터 공유 받음컴포넌트간 state를 보내기 위해서는 반드시 부모 관계조부모 컴포넌트에서 손자 컴포넌트로 데이터를 전달할 때 반드시 중간 부모 컴포넌트를 거쳐야 함부모 컴포넌트는 불필요한 데이터라도 전달하기 위해 일단 데이터를 받아야함자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달할 수 없음Redux를 사용하면 State를 공유할 때 부모관계가 아니어도 상.. 이전 1 다음
