Chapter3 - 리덕스를 통한 리덕스 상태관리 (설치, 개념, 용어, 특징)

리덕스 설치하기

redux - 리덕스

react-redux - 리덕스를 리액트에서 편히 쓸 수 있게 해주는 패키지

 

리덕스 공식문서

 

 

 

리덕스 개념과 용어 정리

리덕스는 데이터를 한 군데 몰아넣고, 여기저기에서 꺼내볼 수 있게 해주는 친구이다.

아래 용어들은 리덕스의 기본 용어인데, 내가 키워드 삼기 좋은 용어들이다.

 

(1) State

 

👉 리덕스에서는 저장하고 있는 상태값("데이터"라고 생각하셔도 돼요!)를 state라고 불러요. 딕셔너리 형태({[key]: value})형태로 보관한다.

 

(2) Action

 

👉 상태에 변화가 필요할 때(=가지고 있는 데이터를 변경할 때) 발생하는 것이다.

액션은 객체이다. 이런 식으로 쓰인다. type은 이름같은 것이고, 내가 정하는 임의의 문자열을 넣는다.

{type: 'CHANGE_STATE', data: {...}}

 

(3) ActionCreator

 

👉 액션 생성 함수라고도 부른다. 액션을 만들기 위해 사용한다.

//이름 그대로 함수이다!

const changeState = (new_data) => { // 액션을 리턴한다! (액션 생성 함수니까)

  return {

    type: 'CHANGE_STATE',

    data: new_data

  }

 }

 

(4) Reducer

 

👉 리덕스에 저장된 상태(=데이터)를 변경하는 함수이다.

우리가 액션 생성 함수를 부르고 → 액션을 만들면 → 리듀서가 현재 상태(=데이터)와 액션 객체를 받아서 → 새로운 데이터를 만들고 → 리턴해준다.

// 기본 상태값을 임의로 정해줬다.

 const initialState = {

    name: 'mean0'

   }

  function reducer(state = initialState, action) {

     switch(action.type){

        // action의 타입마다 케이스문을 걸어주면,

         // 액션에 따라서 새로운 값을 돌려준다!

          case CHANGE_STATE

          : return {name: 'mean1'};

         

          default:

          return false;

        }

      }

(5) Store

 

👉 우리 프로젝트에 리덕스를 적용하기 위해 만드는 것이다!

스토어에는 리듀서, 현재 애플리케이션 상태, 리덕스에서 값을 가져오고 액션을 호출하기 위한 몇 가지 내장 함수가 포함되어 있다. 생김새는 딕셔너리 혹은 json처럼 생겼다. 내장함수는 공식문서에서 보도록 하자.

 

(6) dispatch

 

👉 디스패치는 앞으로 정말 많이 쓸 스토어의 내장 함수이다! 액션을 발생 시키는 역할을 한다.

실제로는 이것보다 코드가 길지만, 간단히 표현하자면 이런 식으로 우리가 발생시키고자 하는 액션을 파라미터로 넘겨서 사용한다.

dispatch(action);

 

 

 

 

리덕스의 3가지 특징

 

 (1) store는 1개만 쓴다!

👉 리덕스는 단일 스토어 규칙을 따른다. 한 프로젝트에 스토어는 하나만 쓰자.

 

 

(2) store의 state(데이터)는 오직 action으로만 변경할 수 있다!

 👉 리액트에서도 state는 setState()나, useState() 훅을 써서만 변경 가능했었는데,

데이터가 마구잡이로 변하지 않도록 불변성을 유지해주기 위함이다.

*불변성 - 허락없이 데이터가 바뀌면 안된단 소리

 

조금 더 그럴 듯하게 말하면, 리덕스에 저장된 데이터 = 상태 = state는 읽기 전용이다.

그런데... 액션으로 변경을 일으킨다면서요? 리듀서에서 변한다고 했잖아요? → 그것도 맞다. 조금 더 정확히 해보면

가지고 있던 값을 수정하지 않고, 새로운 값을 만들어서 상태를 갈아끼운다!

즉, A에 +1을 할 때, A = A+1이 되는 게 아니고, A' = A+1이라고 새로운 값을 만들고 A를 A'로 바꾸죠.

 

 

(3) 어떤 요청이 와도 리듀서는 같은 동작을 해야한다!

👉 리듀서는 순수한 함수여야 한다는 말입니다. 순수한 함수라는 건,

• 파라미터 외의 값에 의존하지 않아야하고,
• 이전 상태는 수정하지(=건드리지) 않는다. (변화를 준 새로운 객체를 return 해야합니다.)
• 파라미터가 같으면, 항상 같은 값을 반환
• 리듀서는 이전 상태와 액션을 파라미터로 받는다.