[React] 리덕스란 무엇일까?

💡 리덕스란?

➰ 상태 관리를 효율적으로 하게 도와주는 오픈소스 JavaScript 라이브러리

➰ Store라는 곳에 상태를 저장하는 전역 상태 관리 라이브러리

 

❓ 리덕스를 사용하는 이유

➰ 리액트의 데이터 흐름은 단방향이기 때문에 부모에서 자식으로 전달해주는 식으로 상태를 관리한다.

➰ 부모와 자식 컴포넌트의 깊이가 짧다면 문제가 되지 않지만, 길다면 props drilling이 발생한다.

➰ Props Drilling - props를 하위 컴포넌트로 전달하기 위해 여러 컴포넌트를 거쳐야 하는데, 그 데이터가 필요하지 않은 컴포넌트에까지 props를 전달하게 되는 현상

(좌) 깊이가 1일 경우 / (우) 깊이가 3일 경우

 

✏️  리덕스를 사용하기 위해 알아야 할 개념

1. Action

➰ 상태값이 어떻게 변화할 지 행동을 적어놓은 객체

➰ 액션 객체는 type 필드를 필수적으로 가지고 있어야하고 그 외의 값들은 개발자 마음대로 넣어줄 수 있다.

{
  type: "TOGGLE_VALUE"
}

 

2. Action Creator

➰ 액션을 만드는 함수로, 단순히 파라미터를 받아와서 액션 객체 형태로 만들어준다.

export function addTodo(data) {
  return {
    type: "ADD_TODO",
    data
  };
}

// 화살표 함수로도 만들 수 있습니다.
export const changeInput = text => ({ 
  type: "CHANGE_INPUT",
  text
});

 

3. Dispatch

➰ 상태값 업데이트를 실행하는 함수

➰ 액션을 파라미터로 전달한다. 그렇게 호출을 하면, 스토어는 리듀서 함수를 실행시켜서 해당 액션을 처리하는 로직이 있다면 액션을 참고하여 새로운 상태를 만들어준다.

//내부 상태를 변경하는 유일한 방법인 액션과 그 액션을 리듀서로 보내줄 디스패치
store.dispatch({ type: 'ADD_TODO' })
store.dispatch({ type: 'CHANGE_INPUT' })

 

4. Reducer

➰ 액션의 타입에 따라 변화를 일으키는 함수

➰ 현재의 상태와, 전달 받은 액션을 참고하여 새로운 상태를 만들어서 반환한다.

function reducer(state, action) {
  // 상태 업데이트 로직
  return alteredState;
}

 

5. Store

➰ 상태값을 저장하는 공간

➰ 스토어 안에는 현재의 앱 상태와 리듀서가 들어가있고, 추가적으로 몇가지 내장 함수들이 있다.

import { createStore } from 'redux';

//상태가 저장되는 공간인 스토어
let store = createStore(reducer)

//상태 변화를 감지하는 서브스크라이브
// 구독 또한 스토어의 내장함수 중 하나
// 함수 형태의 값을 파라미터로 받아온다.
// subscribe 함수에 특정 함수를 전달해주면, 액션이 디스패치 되었을 때 마다 전달해준 함수가 호출된다.
store.subscribe(() => console.log(store.getState())))

❗️ 리액트에서는 subscribe를 사용하지 않고 useSelector Hook 을 사용하여 리덕스 스토어의 상태에 구독한다.

 

📌  리덕스의 규칙

1. 단일 스토어 사용을 권장한다.

➰ 하나의 애플리케이션에는 하나의 스토어를 사용한다.

 

2. 상태는 읽기 전용이어야 한다.

➰  기존의 상태는 건들이지 않고 새로운 상태를 생성하여 업데이트 해주는 방식으로 해주면, 나중에 개발자 도구를 통해서 뒤로 돌릴 수도 있고 다시 앞으로 돌릴 수도 있다.

➰  리덕스에서 불변성을 유지해야 하는 이유는 내부적으로 데이터가 변경 되는 것을 감지하기 위하여 shallow equality 검사를 하기 때문이다.

➰  이를 통하여 객체의 변화를 감지 할 때 객체의 깊숙한 안쪽까지 비교를 하는 것이 아니라 겉핥기 식으로 비교를 하여 좋은 성능을 유지할 수 있다.

➰ shallow equality : obejct들을 비교할때 그들의 attribute들을 비교하지 않고, 그들의 reference를 비교한다.

 

3. 리듀서는 순수 함수여야 한다.

➰ 순수 함수 :  동일한 입력을 받았을 때 언제나 동일한 출력을 내는 함수

➰ 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과값을 반환해야한다.