TIL) React 리덕스

리덕스는 전역상태관리 저장소

전역상태 관리 저장소. 부모, 자식 컴포넌트와는 별도로 존재하는 데이터 베이스.

propsdrilling : 부모에서 마지막 자식 컴포넌트에게 전달해주어야 하는 props 때문에 다른 자식 컴포넌트들까지 불필요한 데이터를 갖고있는 상태. 전역상태관리라이브러리 이용시 이 문제가 해결 됨.

 

전역상태관리 흐름

 

1. 전역으로 볼 수 있는 데이터가있다.

2. 데이터를 참조, 수정 하는 컴포넌트들이 있다.

3. 바뀐 값을 모두 보게 해줘야 한다.

스토어 : 데이터 저장 공간

리듀서 : 데이터 수정 공간

(1) 리덕스 Store를 Component에 연결한다.

(2) Component 에 상태 변화가 필요할 때 Action을 부른다.

(3) Reducer를 통해 새로운 상태 값을 만들고, 

(4) 새 상태값을 Store에 저장한다.

(5) Component는 새로운 상태값을 받아온다. (props를 통해 받아오니까, 다시 랜더링 됨)

 

리덕스란?

리덕스는 아주 흔히 사용하는 상태관리 라이브러리, 데이터를 한 군데 몰아넣고, 여기저기에서 꺼내볼 수 있게 함.

(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

액션을 발생 시키는 역할. 우리가 발생시키고자 하는 파라미터로 넘겨 사용. ex) dispatch(action);

 

리덕스의 특징

 

(1) store는 1개만 쓴다!

 👉 리덕스는 단일 스토어 규칙을 따름. 한 프로젝트에 스토어는 하나만 씀.

 

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

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

데이터가 마구잡이로 변하지 않도록 불변성을 유지해주기 위함. 불변성 :허락없이 데이터가 바뀌면 안된단 소리

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

그런데... 액션으로 변경을 일으킨다면서요? 리듀서에서 변한다고 했잖아요? →가지고 있던 값을 수정하지 않고, 새로운 값을 만들어서 상태를 갈아끼운다. 즉, A에 +1을 할 때, A = A+1이 되는 게 아니고, A' = A+1이라고 새로운 값을 만들고 A를 A'로 바꿈.

 

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

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

- 파라미터 외의 값에 의존하지 않아야하고,

- 이전 상태는 수정하지(=건드리지) 않는다. (변화를 준 새로운 객체를 return 해야.)

- 파라미터가 같으면, 항상 같은 값을 반환

- 리듀서는 이전 상태와 액션을 파라미터로 받는다.