학습 내용

Redux

개념

자바스크립트 어플리케이션의 상태 관리를 위한 도구이다.
React, Vue 같은 라이브러리와 함께 사용되는 것이 일반적이고,
React와 Redux를 함께 사용할 경우에는 React-Redux 라이브러리가 사용된다.

Redux의 핵심 개념은 단 하나의 Store(저장소)를 가지고,
이 Store의 State(상태)를 직접 변경하지 않고,
Action을 발생시켜, Reducer를 통해 상태를 변경하는 것이다.

Action: 객체. 상태에 대한 정보를 가지고 있는 자바스크립트 객체이다.
상태를 변경하고자 하는 Action을 발생시키면 Reducer 함수가 호출된다.
Reducer: 함수. 현재 상태와 Action 객체를 인자로 받아서, 새로운 상태를 만들어 반환한다.

Redux는 이러한 상태 변화를 추적하기 위해, 상태 변경 이력을 모두 저장하고 관리하는데,
이를 통해 시간 여행 디버깅과 같은 강력한 기능을 제공한다.
*시간 여행 디버깅(Time Travel Debugging)
Redux 개발 도구 중 하나로, Action과 State의 흐름을 시각적으로 확인하고 디버깅할 수 있는 기능이다.

또한, Redux는 미들웨어(middleware)를 이용하여,
액션 발생 후 리듀서가 호출되기 전에 사전에 지정된 작업을 수행할 수 있다.
예를 들어, Redux-Thunk 미들웨어를 이용하면, 비동기 작업을 처리할 수 있다.

이러한 기능들을 통해 Redux는 복잡한 상태 관리를 쉽게 할 수 있게 해주며,
어플리케이션의 확장성과 유지보수성을 높여준다.

필요한 이유

React에서 데이터 흐름을 만들 때,
애플리케이션의 규모가 커질 수록,
상태 끌어올리기, Props 내려주기를 여러 번 반복해야 한다.

만약 상태를 변경해야 할 컴포넌트와 컴포넌트 사이에,
"1억 개"의 컴포넌트가 있고, Props 내려주기, 상태 끌어올리기를 반복해야 한다면,
이 상태를 변경하는 코드를 작성하기 싫을 것이다.

이것을 한 번에 관리해줄 수 있는 도구가 Redux이다.
Redux는 전역에서 상태를 관리할 수 있는 저장소를 만드는 개념이다.
따라서, 중간에 1억 번의 컴포넌트를 거쳐서 상태를 전달하지 않아도 된다.
전역에서 상태 변경이 가능하게 돕기 때문이다.

데이터 흐름

Redux는 단방향 데이터 흐름을 따른다.(한 방향으로만 데이터가 흐른다는 의미)

Redux의 상태관리 흐름은 다음과 같다.
Action -> Dispatch -> Reducer -> Store(Update State) -> Update View(리렌더링)

액션(Action) 생성
상태 변경을 위한 정보를 담은 plain JavaScript 객체다.
애플리케이션 어디에서나 발생할 수 있습니다.

디스패치(Dispatch)
액션 생성자 함수인 Dispatch를 호출하여 액션 객체를 생성한다.
생성된 액션 객체는 store.dispatch(action)를 호출하여 디스패치된다.
디스패치된 액션은 리듀서에게 전달된다.

리듀서(Reducer) 실행
이전 상태와 디스패치된 액션을 받아 새로운 상태를 반환하는 순수 함수이다.
리듀서 함수는 이전 상태(state)와 액션(action)을 받아서 새로운 상태를 계산한다.

상태 업데이트(Update State)
새로운 상태를 스토어에 저장한다.
상태 변경에 따른 다른 동작을 처리하기 위해 콜백 함수나 이벤트 핸들러 등을 사용할 수 있다.

뷰 업데이트(Update View)
상태가 변경되면 뷰(React 컴포넌트)가 리렌더링된다.
이때 새로운 상태를 받아와서 렌더링을 처리한다.
이렇게 하면 Redux에서는 모든 상태 변화를 추적할 수 있으므로 애플리케이션의 복잡성을 낮추고 유지보수를 용이하게 한다.

용어 설명

• Action: 애플리케이션에서 발생하는 이벤트에 대한 정보를 가지고 있는 객체이다.
  'type'이라는 문자열 프로퍼티를 필수로 가져야 한다. 다른 프로퍼티 이름은 'payload'라는 이름으로 통일하여 사용하도록 권장한다. payload 프로퍼티에는 액션 객체가 전달하는 데이터를 담을 수 있다.

• Dispatch: Action을 받아 Reducer로 전달하는 함수이다.
  Action을 보내 상태를 변경하려면, dispatch 함수를 호출해야 한다.

• Reducer: 현재 상태와 전달된 액션을 받아 새로운 상태를 반환하는 함수이다.
  Reducer 함수는 순수 함수로 작성되어야 한다. 따라서, Reducer 함수는 상태를 직접 변경하는 것이 아니라, 새로운 상태를 반환해야 한다.
  *순수 함수: 같은 인자를 받으면, 항상 같은 값을 반환하는 함수.

Redux에서는 이러한 개념들을 이용해 상태를 관리한다.
예를 들어, 사용자가 클릭한 버튼에 따라 애플리케이션의 상태를 변경하려면,
해당 버튼에 대한 Action 객체를 생성하고, 이를 Dispatch 함수를 이용해 Reducer로 보내면,
Reducer 함수에서 새로운 상태를 반환한다.
이후, 이 새로운 상태를 화면에 렌더링하여 사용자에게 보여준다.

Redux의 3가지 원칙

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

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

• Changes are made with pure functions
  변경은 순수함수로만 가능하다는 뜻으로,
  상태가 엉뚱한 값으로 변경되는 일이 없도록 "순수함수"로 작성되어야 하는 Reducer와 연결되는 원칙이다.