12. 리덕스

지선·2021년 8월 3일

React 스파르타코딩클럽

React

목록 보기

13/14

1. 리덕스 이해하기

왜 쓰는가?

상태관리를 할 때!

App에 있는 한컴포넌트를 두개로 분리하고 싶다면 ?
state와props를 이용해서 만들면, 추후에 App 컴포넌트를 수정하고 싶어도 어렵다. 자식 컴포넌트는 부모 컴포넌트의 state를 맘대로 조작할 수 없기 때문이다.

그렇다면 만약 App 컴포넌트와 새로 분리할 컴포넌트가 같은 데이터저장소에 있다면?
새 컴포넌트를 추가하면, App이 보고있는 데이터도 같이 추가가 될것!!

이 개념이 바로 리덕스!!

리덕스는 데이터를 한 군데 몰아넣고, 여기저기 꺼내볼 수 있게 해준다~!
그렇다면 리덕스에서 쓰이는 기본 용어들을 알아보자!

용어 개념과 흐름 이해하기!

Store, Component, Action, Reducer 네가지 용어를 기억하고 흐름을 파악하자

1) State

전역으로 가지고 있는 데이터
dictionary 형태로 보관한다 { [key] : value; }

2) Action

상태를 변화시킬때 발생함
객체 형태로 씀 {type: 'CHANGE_STATE', data:{...}}

3) ActionCreator

액션생성 함수 / 액션을 만들기 위해 사용함
함수 형태로 씀 export const createBucket = (textBucket) => { return {type: CREATE, textBucket}; }

4) Reducer

리덕스에 저장된 데이터를 변경하는 함수
상태, 리덕스의 데이터값을 가져옴 / 액션을 호출하기 위한 내장함수를 포함함
dictionary 형태로 씀

5) dispatch

액션을 발생시키는 역할을 함
store의 내장함수로 자주 쓰임!

기억해야 할 특징 3가지

1) Store는 1개만 쓴다

단일스토어 규칙 : 한 프로젝트에는 한 스토어만 존재하도록

2) Store의 State는 오직 Action으로만 변경할 수 있다.

불변성

3) 어떤 요청이 와도 Reducer는 같은 동작을 해야한다.

즉 Reducer는 순수한 함수여야한다.

2. 리덕스 설정하기(데이터 받아오기 - 모듈, 액션, 액션함수, 리듀서, 스토어 사용하는 방법)

순서

1. 리덕스 패키지 설치

명령어 입력 : yarn add redux react-redux
redux는 react와 별개의 라이브러리 이므로, redux패키지 하나와 react와 redux를 연결해주는 react-redux 총 두개를 설치해주어야 한다.

2. 폴더, 파일 만들기

src 폴더 안에 redux폴더를 만들고, 그안에 modules폴더를 만들어준다.
module파일의 이름은 소문자로 만든다.! (bucket.js)

bucket.js
총 3가지, action, action함수, reducer를 만들것이다. 아래 순서대로 만들어 보자!

3-1. Actions 생성

action의 이름은 대문자로 줌 (LODA)

state값은 객체형식으로 적기

3-2. initialState 생성

초기데이터값 설정하기

4. Action Creators 생성

함수를 만든다.

return값에 action의 type명과 가져오는값(여기서는 input된 textBucket값)을 써줌

5. Reducer 생성

export default function reducer(state={}, action={}){ switch(action.type){ case '~action~' : { return ~ ;} default: return state;}}

export default 로 reducer 함수를 빼주기!

state와 action값 지정

switch문으로 action 받아오고, return해서 빼내준다.

configStore.js

6. Store 만들기

필요한것 import 해오기

combineReducers로 reducer 합쳐주기, store에 집어넣기

export store 해주기

3. 리덕스와 컴포넌트 연결하기

useSelector : 상태조회
useDispatch : 액션생성

index.js

7. Provider불러오고, store 임포트하기

4. 컴포넌트에서 리덕스 데이터 사용하기

클래스형 컴포넌트에서

App.js

1. redux모듈과 connect함수 & 2. action함수 불러오기

connect 함수 : component와 store를 연결해준다.

action 함수 : 불러와서, action생성함수를 부르는 함수에서 사용해준다.

3. 상태값 가져오는 함수 & 4. action생성 함수를 부르는 함수 만들기

상태값을 가져오는 함수 : 리덕스 스토어에 있는 state상태값을 props의 형태로 넣어줌

action생성 함수를 부르는 함수 : action을 반환해주고, dispatch로 감시해줌

5. 콘솔에 this.props 찍어보기

store에 있는 값이 잘 나왔는지 확인!

6. this.state에 있는 데이터를 지우고, 스토어에 있는 데이터로 바꾸기

App 컴포넌트 안에, this.state로 있던 list를 지우고,

상태값을 가져오는 mapStateToProps 함수 안에 state를 props 형태로 넣어준다

7. setState를 this.props.create로 바꾸기

리스트를 생성하는 값을 props 형태로 바꿔서 만들어 준다.