코딩65 Redux - Refactoring(action creators, action values) # Action Creator 1. Action Creator 란? 만약에 액션객체의 value를 변경할 일이 생긴다면 어떨까? PLUS_ONE , MINUS_ONE 이라는 value 대신 이 액션객체가 counter 모듈안에 있다는 것을 강조하기 위해서 counter/PLUS_ONE, counter/MINUS_ONE 이라는 value로 바꾸길 각각 바꾸길 원한다면 아래 코드에서 4군데를 변경해줘야 할 것이다. 근데 또 만약에 그게 4군데가 아니라 프로젝트 규모가 굉장히 커서 100군데라면 수정해야 할 부분이 굉장히 많아질 것이다. // src/App.js import React from "react"; import { useDispatch, useSelector } from "react-redux"; .. 2023. 4. 19. Redux - 카운터 프로그램 만들기2 # 리덕스의 흐름 도식화 View 에서 액션이 일어난다. dispatch 에서 action이 일어나게 된다. action에 의한 reducer 함수가 실행되기 전에 middleware가 작동한다. middleware 에서 명령내린 일을 수행하고 난뒤, reducer 함수를 실행한다. (3, 4번은 아직 몰라도 됩니다!) reducer 의 실행결과 store에 새로운 값을 저장한다. store의 state에 subscribe 하고 있던 UI에 변경된 값을 준다. 1. counter.js 모듈의 state 수정 기능 만들기 (+ 1 기능 구현해보기) 1) 어떻게 counter.js 모듈에 있는 state의 값을 변경할 수 있을까? useState()를 사용해서 number에 +1을 할 때는 setNumber.. 2023. 4. 19. Redux 카운터 프로그램 만들기 # 첫 모듈 만들기 첫 모듈은 카운터 프로그램에 필요한 State들이 모여있는 모듈이 된다. 1. modules 폴더에 counter.js 파일을 생성한다. 2. 코드 작성 // src/modules/counter.js // 초기 상태값 const initialState = { number: 0, }; // 리듀서 const counter = (state = initialState, action) => { switch (action.type) { default: return state; } }; // 모듈파일에서는 리듀서를 export default 한다. export default counter; # 모듈의 구성요소 살펴보기 1. initialState === 초기 상태값 // 초기 상태값 const .. 2023. 4. 18. Redux - Redux 설정 # 리덕스 설치 리액트에서 리덕스를 사용하기 위해서는 2개의 패키지를 설치해야 한다. vscode 터미널에서 아래 명령어를 입력해서 2개의 패키지를 설치하면 된다. 참고로 react-redux 라는 패키지는 리덕스를 리액트에서 사용할 수 있도록 서로 연결시켜주는 패키지다. yarn add redux react-redux # 아래와 같은 의미 yarn add redux yarn add react-redux # 폴더 구조 생성하기 좌측의 이미지와 같이 폴더 구조를 생성 src 폴더 안에 redux 폴더를 생성 redux 폴더 안에 config, modules 폴더를 생성 config 폴더 안에 configStore.js파일을 생성 각각의 폴더와 파일은 다음과 같은 역할이 있다. redux : 리덕스와 관련된.. 2023. 4. 18. 이전 1 ··· 3 4 5 6 7 8 9 ··· 17 다음
