[Computer Science] Redux란?

Redux란?

👉 Redux란 javascript 상태관리 라이브러리이다.

상태 관리의 필요성

👉 상태란?

• React에서 state는 component 안에서 관리되는 것이다.

👉 Component 간의 정보 공유

• 자식 컴포넌트들 간의 다이렉트 데이터 전달은 불가능하다.
• 자식 컴포넌트들 간의 데이터를 주고 받을 때는 상태를 관리하는 부모 컴포넌트를 통해서 주고 받는다.
• 자식이 많아진다면 상태 관리가 매우 복잡해진다.
• 상태를 관리하는 상위 컴포넌트에서 계속 내려 받아야한다. (Props drilling 이슈)
  

👉 상태 관리 라이브러리를 사용하면

• 전역 상태 저장소 제공
• Props drilling 이슈 해결

👉 상태 관리 툴 종류

• React Context
• Redux
• MobX

Redux의 세가지 원칙

1) Single source of truth
하나의 애플리케이션 안에는 하나의 스토어만 사용하자는 원칙이다. 이렇게 하면 애플리케이션의 디버깅이 쉬워지고 서버와의 직렬화가 될 수 있고 쉽게 클라이언트에서 데이터를 받아들여올 수 있게 된다.

2) State is read-only
상태를 변화시키는 방법은 오직 액션을 일으키는 것이다. 이것은 상태를 변화시키는 의도를 정확하게 표현할 수 있고, 상태 변경에 대한 추적이 용이해지게 된다.

3) Changes are made with pure functions
변화를 일으키는 리듀서 함수는 순수한 함수여야 한다. 순수 함수는 다음 조건을 만족한다.

• 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다.
• 파라미터 외의 값에는 의존하면 안된다.
• 이전 상태는 절대로 건드리지 않고, 변화를 준 새로운 객체 상태를 만들어서 반환한다.
• 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환해야 한다.

Redux 기본 용어

1) 액션(Action)
상태에 변화가 필요하다면 액션을 일으켜야한다. 액션은 객체로 표현되며 type필드를 반드시 가지고 있어야 한다.

{
   type: 'ADD_TODO',
   data: {
       id: 1,
       text: '리덕스 배우기'
   }
}

2) 액션 생성함수(Action Creator)
액션 생성함수는 액션 객체를 만들어주는 함수이다. 화살표 함수로도 표현이 가능하다.

function addTodo(data) {
 return {
   type: 'ADD_TODO',
   data,
 }
}

3) 리듀서(Reducer)
리듀서는 현재 상태와 액션 객체를 받아, 필요하다면 새로운 상태를 리턴하는 함수이다. 액션 유형을 기반으로 이벤트를 처리하는 이벤트 리스너라고 생각하면 된다.

const initialState = {
 counter: 1,
}
function reducer(state = initialState, action) {
 switch (action.type) {
   case INCREMENT:
     return {
       counter: state.counter + 1,
     }
   default:
     return state
 }
}

4) 스토어(Store)
스토어는 상태가 들어있다. 하나의 프로젝트는 하나의 스토어만 가질 수 있다.

5) 디스패치(Dispatch)
스토어의 내장 함수 중 하나인 디스패치는 액션 객체를 넘겨줘서 상태를 업데이트 하는 유일한 방법이다. 이벤트 트리거라고 생각할 수 있다.

6) 구독(Subscribe)
스토어의 내장 함수 중 하나인 구독은 리스너 함수를 파라미터로 넣어 호출하면 상태가 업데이트될 때마다 호출된다. 일종의 이벤트 리스너라고 볼 수 있다.

const listener = () => {
 console.log('상태가 업데이트됨')
}
const unsubscribe = store.subsribe(listener)

unsubscribe() // 추후 구독을 비활성화할 때 함수를 호출

7) 셀렉터(Selector)
일반적인 vanilla.js의 리덕스에서는 스토어의 내장함수인 getState를 사용하지만 react-redux에서는 상태 값을 가져올 때 사용된다.

redux 상태 변화의 흐름

• 초기 상태
  • 먼저 root reducer 함수를 사용하여 만들어진 리덕스 스토어가 있다.
  • 스토어는 root reducer를 한 번 호출하고 리턴 값을 초기 상태로 저장한다.
  • UI가 처음 렌더링될 때, UI 컴포넌트는 리덕스 스토어의 상태에 접근하여 그것을 렌더링에 활용한다. 또한 그것들은 후에 상태의 변화가 업데이트 되는 것을 구독한다.
• 업데이트(순서)
  1) 유저가 버튼을 클릭한다.
  2) 앱은 유저의 행동에 맞는 디스패치를 실행해 액션을 일으킨다.
  3) 스토어는 이전 상태와 현재 액션으로 리듀서 함수를 실행하고, 그 리턴 값을 새로운 상태로 저장한다.
  4) 스토어는 스토어를 구독하고 있던 UI들에게 업데이트 되었다고 알려준다.
  5) 스토어의 데이터가 필요한 각각의 UI들은 필요한 상태가 업데이트 되었는지 확인한다.
  6) 데이터가 변경된 각 구성요소는 새 데이터로 강제로 다시 렌더링하므로 화면에 표시되는 내용을 업데이트 할 수 있다.

Redux는 언제 쓰는게 좋을까?

👉 리덕스 공식문서 참고

• 앱의 여러 위치에서 필요한 많은 양의 상태들이 존재할 때 (전역 상태가 필요하다고 느껴질 때)
• 상태들이 자주 업데이트 될 때
• 상태를 업데이트 하는 로직이 복잡할 때
• 앱이 중간 또는 큰 사이즈의 코드를 갖고 있고 많은 사람들에 의해 코드가 관리될 때
• 상태가 업데이트 되는 시점을 관찰할 필요가 있을 때

Redux의 장단점

장점

• 단방향 모델링(한가지 방향으로만 바뀐다). action을 dispatch 할 때마다 기록(history)이 남아 에러를 찾기 쉽다. 타임머신 기능을 사용할 수 있음.
• 상태의 중앙화 : Store라는 이름의 전역 자바스크립트 변수를 통해 상태를 한 곳에서 관리하기 때문에 전역 상태를 관리할때 굉장이 효과적이다.
• Redux는 상태를 읽기 전용으로 취급한다. 상태가 읽기 전용이므로, 이전 상태로 돌아가기 위해서는 그저 이전 상태를 현재 상태에 덮어쓰기만 하면 된다.

단점

• 아주 작은 기능이여도 리덕스로 구현하는 순간 몇 개의 파일(액션 등)들을 필수로 만들어야하여 코드량이 늘어난다.
• 타임머신 기능을 사용하려면 불변성 개념을 지켜야 사용할 수 있으므로 매번 state라는 객체를 만들어줘야 한다.
• Redux는 상태를 읽기 전용으로 취급할 뿐, 실제 읽기 전용으로 만들어주지는 않는다. 때문에 상태를 실수로 직접 변경하지 않도록 항상 주의해야 한다.

Reference

참고 : 리덕스의 장점, 단점