React - redux 이해하기 (리덕스 개념정리)

😎 React - 리덕스(redux) 이해하기

✅ Redux란?

리덕스 사용 이유를 한 번에 설명하는 이미지

 

Redux
애플리케이션 상태를 관리하고 업데이트하기 위한 패턴 및 라이브러리입니다.
상태가 예측 가능한 방식으로만 업데이트될 수 있도록 하는 규칙과 함께
전체 애플리케이션에서 사용해야 하는 상태에 대한 중앙 집중식 저장소 역할을 합니다.
-redux 공식문서-

 

한 마디로 리덕스는 "state 사용을 더 편하게 해주는 라이브러리"라고 이해할 수 있다

 

 

 

Local State

 

리액트를 사용하다 보면

A 컴포넌트 안에 있는 data라는 state를(Local State) B 혹은 C 컴포넌트에서 사용하기 위해

A 컴포넌트에서 B나 C 혹은 B를 통해서 C로 전달해주어야 하는 불편함이 있다

만약 그 depth가 깊다면? 이미지(Without Redux)에서 알 수 있듯이

전달 & 전달 & 전달을 계속 해주어야 한다(props drilling)

전달에 전달을 거듭하는 Local State

 

Local State를 다른 컴포넌트에서 사용하기 위해서는

한 단계씩 전달 해야하는 불편함이 있는 것이다!

 

 

Global State

 

Local State의 불편함을 해결할 수 있는 방법은

State 관리를 Local이 아닌 Global하게 바꾸는 것이다

그래서 리덕스(Redux)가 존재한다!

리덕스를 한 번에 설명하는 이미지

 

리덕스를 사용하는 이유에 대해 이해가 됐으리라 생각한다

이제 빠르게 리덕스를 알아보자

 

✅ redux의 3가지 규칙

1. Single source of truth(단일 스토어)

• 하나의 애플리케이션 안에는 하나의 스토어(데이터 공간)가 있다.

2. State is read-only(읽기 전용 상태)

• 상태 업데이트는 기존 객체를 건드리지 않고 새로운 객체를 생성해야 한다. (불변성 유지)
• 좋은 성능을 유지하기 위해 얕은 비교(shallow equality) 검사를 하는데, 이를 위해 불변성을 유지해야 한다

3. Changes are made with pure functions(리듀서는 순수함수여야 한다)

• 변화를 일으키는 리듀서 함수는 순수 함수여야 한다

*순수 함수의 조건

• 사이드 이펙트를 만들지 않는다 (함수 외부에 영향을 끼치면 안된다)
• 같은 입력 값이 주어졌을 때, 언제나 같은 결과 값을 리턴한다

 

 

✅ redux의 핵심 요소 5가지

리덕스의 핵심 요소에 대한 설명

• Action
• Reducer
• Store
• Dispatch
• Subscribe

Action
State 행동 정의 영역

 

Reducer

변화를 일으키는 함수 (action을 통해 정의한 행동을 실행)

즉, 데이터(state)를 수정하는 함수

Store
어플리케이션에 단 하나만 존재하며

스토어 안에는 현재 애플리케이션 상태와 리듀서가 들어가 있고, 내장함수를 제공한다.
컴포넌트에서 상태 정보가 필요할 때 스토어에 접근한다.

Dispatch

스토어의 내장함수이며
디스패치는 ‘액션을 발생 시켜 주는 것’으로 이해하면 된다

store에서 reducer함수를 실행시켜 state를 업데이트한다
dispatch(action) 과 같은 형태로 액션 객체를 파라미터로 넣어서 호출한다

Subscribe

subscribe는 변화를 감지한다

dispatch를 통해서 reducer의 state를 변경시킬 때 마다 변화를 감지한다

subscribe의 매개변수로 사용된 함수는 액션이 디스패치되어 상태가 업데이트될 때 마다 호출된다

 

 

✅ redux의 흐름

리덕스의 흐름. 중요한 개념입니다!

 

1. view 에서 액션이 일어난다.
2. action 객체가 dispatch() 메소드에 전달된다.
3. dispatch(액션)을 통해 action이 일어나게 된다.
4. action에 의한 reducer 함수가 실행되기 전에 middleware가 작동한다.
5. middleware에서 명령 내린 일을 실행 후, reducer 함수를 실행한다.
6. reducer의 실행 결과 새로운 값(state)을 store에 저장한다.
7. store의 state를 subscribe하고 있던 UI에 변경된 값을 준다.

 

 

💡 redux 정리

-중앙 집중식 State 저장소 역할을 한다

-리덕스에는 3가지 규칙이 있다 (단일 스토어, 읽기 전용 상태, 순수함수 리듀서)

-리덕스에는 5가지 핵심 요소가 있다 (Action, Reducer, Store, Dispatch, Subscribe)

리덕스의 흐름 간략화 설명

 

❗ 마무리

리액트와 리덕스는 별개다

리덕스는 리액트의 부가기능이 아니라 js, vue, angular 등에서도 사용할 수 있는 독립적인 기능이다

하지만 리액트에서 리덕스 같은 개념은 꼭 필요하다 (데이터의 단방향 흐름 때문)

즉, 상태관리 라이브러리는 리액트에서 단방향 데이터 흐름의 불편함을 개선시키고

개발에 편의성을 제공하기 때문에 이러한 리액트 개발에서 상태관리 도구는 필수라고 볼 수 있다.

 

 

 

참고

https://react.vlpt.us/redux/01-keywords.html

https://ko.redux.js.org/introduction/getting-started