[Redux] 상태 관리 라이브러리

🧐 Redux 란 무엇인가?

자바스크립트에서 상태관리를 할 수 있는 라이브러리고, 변경되는 상태 데이터를 전역 저장소에 보관하여 관리함으로써 상태관리의 복잡성을 해소할 수 있는 도구이다. 특히 리액트 프로젝트에서 많이 사용되지만, 리액트와는 독립적인 라이브러리로 바닐라 자바스크립트에서도 사용할 수 있다.

 

리액트에서 컴포넌트 단위로 코드를 작성하고, 컴포넌트 안에서 상태가 존재한다면 여러 컴포넌트에서 해당 상태에 접근하기 위해 필연적으로 props drilling 이 일어날 수 밖에 없다. 이는 코드의 복잡성을 증가시키고 그렇기 때문에 유지보수가 어렵고 앱의 동작을 예측하기 힘들어진다. 리덕스에서는 상태와 컴포넌트 구조를 분리시킴으로써 상태가 업데이트되는 흠을 추적하기 쉽게하고, 결과적으로 컴포넌트를 구성하는 코드가 화면에만 집중할 수 있도록 도와준다.

 

리덕스는 리액트와 많이 사용되기 때문에 react-redux 라이브러리를 사용해 더 편리하게 사용할 수 있고, 또 기존 redux 보다 더 편리하게 개선된 redux-toolkit 라이브러리를 사용하도록 권장하고 있다.

 

Redux의 구조 

 

자료 출처 코드스테이츠

 

Redux는 다음과 같은 순서로 상태를 관리합니다.

1. 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성됩니다.
2. 이 Action 객체는 Dispatch 함수의 인자로 전달됩니다.
3. Dispatch 함수는 Action 객체를 Reducer 함수로 전달해 줍니다.
4. Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경합니다.
5. 상태가 변경되면, React는 화면을 다시 렌더링 합니다.

즉, Redux에서는 Action → Dispatch → Reducer → Store 순서로 데이터가 단방향으로 흐르게 됩니다

 

Redux 의 구성요소 

Store

Store는 상태가 관리되는 오직 하나뿐인 저장소의 역할을 합니다. Redux 앱의 state가 저장되어 있는 공간이죠. 아래 코드와 같이 createStore 메서드를 활용해 Reducer를 연결해서 Store를 생성할 수 있다.

 

import { createStore } from 'redux';

const store = createStore(rootReducer);

 

Store 의 개념

• 앱의 전역 상태가 저장되는 공간으로, store에 저장되는 state는 직접 변경해서는 안된다.
• 대신 병경을 위한 정보를 담은 Action 객체를 생성하고, dispatch를 통해 그 정보를 store에게 전달한다.
• Action이 전달되면 store는 root reducer를 실행시켜 기존 상태를 기반으로 계산된 새로운 상태를 리턴한다/
• store는 subscribers에게 상태가 업데이트 되었음을 알려서, UI가 화면을 업데이트 할 수 있도록 한다. 

 

Reducer

Reducer는 Dispatch에게서 전달받은 Action 객체의 type 값에 따라서 상태를 변경시키는 함수이다.

이때, Reducer는 순수함수여야 합니다. 외부 요인으로 인해 기대한 값이 아닌 엉뚱한 값으로 상태가 변경되는 일이 없어야 하기 때문입니다.

 

Action

Action은 말 그대로 어떤 액션을 취할 것인지 정의해 놓은 객체로, 다음과 같은 형식으로 구성된다.

// payload가 필요 없는 경우
{ type: 'INCREASE' }

// payload가 필요한 경우
{ type: 'SET_NUMBER', payload: 5 }

여기서 type 은 필수로 지정을 해 주어야 한다. 해당 Action 객체가 어떤 동작을 하는지 명시해 주는 역할을 하기 때문이며, 대문자와 Snake Case로 작성한다. 여기에 필요에 따라 payload를 작성해 구체적인 값을 전달한다.

 

Dispatch

Dispatch는 Reducer로 Action을 전달해 주는 함수이다. Dispatch의 전달인자로 Action 객체가 전달된다.

// Action 객체를 직접 작성하는 경우
dispatch( { type: 'INCREASE' } );
dispatch( { type: 'SET_NUMBER', payload: 5 } );

// 액션 생성자(Action Creator)를 사용하는 경우
dispatch( increase() );
dispatch( setNumber(5) );

Action 객체를 전달받은 Dispatch 함수는 Reducer를 호출한다.

 

Redux Hooks

Redux Hooks는 React-Redux에서 Redux를 사용할 때 활용할 수 있는 Hooks 메서드를 제공한다. 그중에서 크게 useSelector(), useDispatch() 이 두 가지의 메서드를 기억하면 된다.

 

🔥 Redux의 세 가지 원칙

Redux에는 세 가지 원칙이 있습니다. 각각의 원칙이 Redux의 어떤 구성 요소와 연결이 되는지 확인하세요.

 

1. Single source of truth

동일한 데이터는 항상 같은 곳에서 가지고 와야 한다는 의미입니다. 즉, Redux에는 데이터를 저장하는 Store라는 단 하나뿐인 공간이 있음과 연결이 되는 원칙입니다.

 

2. State is read-only

상태는 읽기 전용이라는 뜻으로, React에서 상태갱신함수로만 상태를 변경할 수 있었던 것처럼, Redux의 상태도 직접 변경할 수 없음을 의미합니다. 즉, Action 객체가 있어야만 상태를 변경할 수 있음과 연결되는 원칙입니다.

 

3. Changes are made with pure functions

변경은 순수함수로만 가능하다는 뜻으로, 상태가 엉뚱한 값으로 변경되는 일이 없도록 순수함수로 작성되어야 하는 Reducer와 연결되는 원칙입니다.

 

💡 FLUX 패턴

 

기존에 양방향 데이터 흐름을 가지던 MVC(Model View Controller) 패턴의 문제점을 해결하기 위해 페이스북이 만든 애플리케이션 디자인 패턴이다. 많은 상호작용을 가진 앱에서 이러한 양방향 데이터 흐름은 코드를 복잡하게 하고 버그를 일으킨다는 문제점이 있었는데, 페이스북이 제시한 FLUX 패턴에서는 단방향 데이터 흐름을 사용하여 문제를 해결한다.

 

FLUX 패턴은 아래와 같은 흐름으로 생겼다. Action - Dispatcher - Store - View 의 흐름으로 가다가 View에서 상호작용이 발생하면, Store의 데이터를 변경하는게 아니라 다시 Action을 발생시켜서 Dispatcher - Store의 흐름으로 View에 전달되는 방식이다.

출처: https://medium.com/hcleedev/web-react-flux-%ED%8C%A8%ED%84%B4-88d6caa13b5b

Redux는 FLUX 패턴을 기반으로 작동하고 있다. (단방향 데이터 흐름) 이런 흐름은 데이터가 업데이트 되는 흐름을 파악하기 쉬워지고 따라서 시스템의 동작을 예측하게 해준다는 장점이 있다. 그래서 우리가 복잡하고 거대한 애플리케이션에서 리덕스를 가지고 상태관리를 하는 것이다.