[220707 / Day 38] React-Redux

React-Redux

 

Redux 페이지의 Usage Guides : https://ko.redux.js.org/usage/index (참고)

 

- redux 란? 전역상태를 관리하는 라이브러리

- 전역상태를 저장하는 store 가 있음

- 하나의 프로젝트에 store 는 하나, 그걸 담는 state 는 여러 개.

- setState 역할을 하는 것이 action(데이터를 수정하기 위한 요청, 미리 지정해둬야 함)

- redux 는 리액트에 종속되는 라이브러리가 아니고 다른 라이브러리와 프레임워크, 바닐라 자바스크립트와 함께 사용할 수 있음

 

 

1. Redux 가 작동하는 순서

- 컴포넌트에서는 store 에서 필요한 state 값을 구독해서 사용 (원래는 전역적으로 state 를 관리를 할 수 없음, 하지만 redex는 사용 가능)

- 상태를 변경시켜야 할 때 변경해야 할 정보를 담아서 action 이라는 객체로 생성

- action 을 dispatch(처리될 작업을 실행시키는 것, 보내는 것)해서 reducer 에 넘겨줌

- reducer 는 그 정보(action)를 보고 state 를 정해진 규칙에 따라 변경해줌

- 최종적으로 전역 state 가 변경되고, 해당 state 를 구독하고 있던 컴포넌트들은 변경된 새로운 state 값을 받음, 해당 컴포넌트는 값이 변경되었기 때문에 리랜더링됨.

 

 

2. redux 의 세가지 원칙

https://velog.io/@seungmini/Redux%EC%9D%98-%ED%8A%B9%EC%A7%95-%EC%84%B8%EA%B0%80%EC%A7%80 (참고)

 

  1) single source of truth : 신뢰가능한 단일 출처

데이터(state)는 신뢰가능한 단일 출처를 가져야 한다.

데이터(state)는 여러 곳에 두지 말고 하나의 store 에 두고 관리해야 한다는 뜻

→ 중복된 데이터에 의한 오류가 줄이고 디버깅을 쉽게 하기 위해서

 

  2) state is read-only : 상태는 읽기 전용

데이터의 흐름이 양방향이 아닌 단방향이어야 한다.

state 를 구독하다가 갑자기 컴포넌트를 바꾸는 것이 아닌 일정 방향이 있음

action 이라는 객체를 통해 데이터(state) 가 변경되어야 함

→ 이점 : 이 데이터(state)가 어떤 것에 의해 변경되었는지 명확하게 알 수 있음

 

  3) changes are made with pure functions : reducer 는 순수한 함수

순수한 함수란 어떤 입력 값이 정해져 있을 때 결과 값을 예측할 수 있는 함수

예를 들면 2x2 를 넣으면 4라는 값이 나오는 함수

random 함수는 결과값을 예측할 수 없기 때문에 예측 불가. date 함수는 그때그때 날짜가 달라지기 때문에 예측 불가. 따라서 둘은 순수 함수가 아님

입력값이 있을 때 (action 이 정해졌을 때) 일관된 결과 (random 하지 않은 결과) 를 가지고 와야 함

 

 

3. Redux 설치 : redux toolkit

- npm install @reduxjs/toolkit react-redux : reduxjs/toolkit 과 react-redux 두 개를 설치하는 것

- Redux DevTools : 크롬 확장프로그램, action 이 어떻게 작동하는지 볼 수 있도록 하는 것, 요소검사에서 볼 수 있음

 

 

4. Redux 실행 준비

- store 폴더의 index.js 파일 하나 만들고 Quick Start 에 Create a Redux Store 의 코드 복사해서 붙여넣기 → store 역할 하는 파일

- toolkit 으로 설치했기 때문에 src 폴더의 index.js 파일에 import 해서 사용할 것임

- src 폴더의 index.js 파일에 가서 import store from './store'; 와 import { Provider } from 'react-redux'; 해주기 → store 의 index.js 파일

- <Provider store={store}> <App /> </Provider> → app.js 컴포넌트가 store 에 접근할 수 있도록 Provider로 감싸서 store 내려주기

- store 폴더 안에 counter 폴더 안에 counterSlice.js 파일 생성

- Redux 페이지의 Create a Redux State Slice 의 코드 복사해서 counterSlice.js 파일에 붙여넣고 수정해서 쓸 것임

 

 

5. counterSlice.js 파일

- incrementByAmount : 안 쓸거니까 지우기

- 미리 action 을 요청해놓기 : increment, decrement 라는 action 을 요청. 따라서 state.value += 1 나 state.value -= 1 라는 요청을 할 수 있다는 뜻

- 그런 요청을 받아 실질적으로 값을 처리해주는 함수는 reducers 함수

- createSlice : 툴킷에서 사용하는 함수, reducers(state를 조작하는 함수) 를 담고 있음

- const initialState~ 라고 되어 있는 함수를 따로 빼고 export 안에는 initialState 라고 불러와 주기

- increment 에 state 라는 인자를 갖고 있는 것에 (state, action) 이라고 하나 더 만들어주기

- reducers 에 어떻게 함수를 조작할 것인지 넣어줘야 함

- 인자 state 는 현재값(기존 value값), 인자 action는 데이터가 전달됨(수정 요청을 받게 됨)

- state.value에 1 을 action.payload; 로 수정, 그리고 action.type='SET_VALUE_INCREMENT' 적어주기 / decrement 에도 인자 action 넣고, action.payload 수정, action.type='SET_VALUE_DECREMENT' 적어주기 → 보통 type 은 대문자로 만듬

 

→ 기본 세팅 끝

 

 

6. Quick Start 예제로 만들어보기

- src 파일에 component 폴더에 Counter 폴더 안에 index.js 파일 생성

- app.js 에 Counter 를 import 해주기

- 만든 파일 안에 rsc 해주고 div 태그 안에 Redux 페이지의  Use Redux State and Actions in React Components 의 button 태그 두개 복사 붙여넣기 해주기

- 만든 파일 안에 import { useSelector, useDispatch } from 'react-redux'; 해주기 : react-redux 에서 제공하는 훅

- 만든 파일 안에 const dispatch = useDispatch(); 해주기 : dispatch 만 해주면 useDispatch 훅 사용 가능

- action 인자를 받아 dispatch 로 변화를 요청 : onClick={() => dispatch(변화)} / 액션 직접 만들 수 있지만 매번하면 귀찮기 때문에 액션을 생성하는 함수 호출, 즉 action creator 호출

- action creator 는 이미 만들어져 있음, counterSlice.js 에 가보면 하단에 action 생성 함수가 export 되고 있어 action 을 생성할 수 있음

- counter 의 index.js 파일에 decrement, increment 를 import 해주기

- 가져온 decrement, increment 를 각각 onclick dispatch 함수에 넣어주기

- dispatch(increment(1)) 와 dispatch(decrement(1)) : 1로 값을 설정해주면 payload 로 값이 전달됨

 

 

7. counterSlice.js 파일

- createSlice : create reducers 와 create action 을 합쳐놓은 훅, redux toolkit 에서 제공됨

- Immer 라이브러리 : react 에서 불변성을 유지하는 코드를 작성하기 쉽게 해주는 라이브러리로, 지금 우리는 tool kit 으로 설치했기 때문에 쓰지 않아도 됨

- type 은 action 에서 꼭 들어가야 하는 속성, type 은 어떤 reducer 로 가야 하는지 경로를 정해주기 때문에 꼭 있어야 함

 

 

8. store 폴더의 index.js 파일 (store 역할 하는 파일)

- counterSlice.js 파일을 import

- reducer 에 counter : counterSlice 입력

- counter 라는 reducer, 그리고 counterSlice 를 연결한 것

 

 

9. Counter 폴더의 index.js 파일

- {count} 가 빨간 줄 쳐 있을 거임

- count 는 최종적으로 가져오는 state 값임

- store 파일에서 보낸 state 값을 구독해야 연결이 됨

- useSelector 라는 훅은 store 에서 구독하는 역할을 해줌

- const count = useSelector(state => state.counter.value); → counter 라는 값은 어디서 왔는지? store 파일의 counter 값에서 옴

 

 

10. 확장프로그램 dev tools 에서 보면서 확인해볼 것

- toolkit 설치 않은 채로 dev tool 사용하려면 npm 으로 설치해서 다시 설정해줘야 함

 

요소 검사가서 Redux 란으로 가보면

- action : 어떻게 연결되어 들어는지 보임

- diff : 어떻게 값이 변경되는지 보임

- state : 어떻게 state 가 작동되는지 보임

- 하단의 화살표 go back, go forward : 눌러보면 이전, 이후로 타임라인 돌아감

- chart : type 과 payload 가 가지 형태로 나옴

- raw : type 과 payload 가 객체 형태로 나옴

 

 

11. payload

- 고정하지 않은 값으로 어떤 변경 사항을 추가해주기 위해 설정한 것

- payload 값을 꼭 넣어야 하는 것은 아님, 변경이나 추가 사항이 없으면 state.value 에 값을 고정해놓고 onclick 보낼 때 increment 소괄호 안에 아무것도 안넣어도 됨

 

 

 

 

** 과제 : 오늘 redux 예제 푼 것 연습해보기