[React] 리덕스 알아보기

리덕스가 무엇인지 알아보는 글입니다! 사용 방법은 언급되지 않습니다.

 

리덕스

리덕스는 리액트 앱의 상태를 관리하는 패키지입니다. 여기서 앱의 상태는 즉 데이터를 말합니다. 다시말해 하나의 애플리케이션에서 다루는 데이터를 관리하는 패키지입니다.

 

리덕스의 세 가지 원칙

리덕스에는 아래와 같은 세 가지의 원칙이 있습니다.

 

1. 단일 소스 진실 (Single Source of Truth):
   • 리덕스는 애플리케이션의 상태를 단일 객체로 관리합니다. 이 객체는 애플리케이션의 모든 상태를 포함하며, 이를 스토어(Store)라고 합니다. 모든 컴포넌트에서 이 상태에 접근할 수 있습니다. 
2. 상태는 읽기 전용 (State is Read-Only):
   • 리덕스의 상태는 읽기 전용입니다. 이는 상태를 직접 변경할 수 없으며, 대신 상태를 변경하는 대신에 새로운 상태를 만들어야 합니다.
   • setState 메서드를 활용해서 바꿔야 하며, 리덕스 안에서도 Action 객체를 활용해야 합니다.
3. 상태 변화는 순수 함수로 정의되어야 함 (Changes are made with Pure Functions):
   • 리덕스에서 상태 변화는 리듀서(Reducer)라고 불리는 순수 함수를 통해 이루어집니다. 리듀서는 이전 상태와 액션을 받아 새로운 상태를 반환합니다.
   • 이때 순수 함수의 가장 중요한 특성은 같은 입력에 대해서 항상 같은 결과를 반환한다는 것입니다. 

리덕스의 구성 요소

리덕스의 핵심 개념은 다음과 같습니다:

1. 액션(Action): 상태 변화를 일으키는 것을 나타내는 객체입니다. 액션은 스토어로 전달됩니다.
2. 리듀서(Reducer): 이전 상태와 액션을 받아 새로운 상태를 반환하는 함수입니다. 이전 상태를 변경하지 않고 새로운 상태를 만들어냅니다.
3. 스토어(Store): 애플리케이션의 상태를 보유하고 있으며, getState, dispatch 및 subscribe와 같은 메소드를 제공하여 상태를 관리하고 업데이트합니다.
4. 디스패치(Dispatch): 액션을 스토어에 보내는 것을 의미합니다. 디스패치된 액션은 리듀서에 의해 처리되어 상태가 업데이트됩니다.
5. 구독(Subscribe): 스토어의 상태 변화를 감지하고, 상태가 변화할 때마다 특정 함수를 호출합니다.

리덕스 공식 문서

 

리덕스 동작 흐름

리덕스의 흐름은 다음과 같습니다:

1. 액션(Action) 발생: 사용자 상호 작용 또는 애플리케이션의 다른 부분에서 액션을 발생시킵니다. 액션은 애플리케이션 상태를 변경하려는 의도를 가지고 있는 객체입니다. 예를 들어, 사용자가 로그인 버튼을 클릭하면 로그인 액션이 발생할 수 있습니다.
2. 디스패치(Dispatch): 발생한 액션을 리덕스 스토어로 보냅니다. 디스패치 함수는 액션을 전달하고, 스토어에게 액션이 발생했음을 알립니다. 스토어는 이 액션을 리듀서에게 전달합니다.
3. 리듀서(Reducer) 실행: 리듀서는 이전 상태와 액션을 받아서 새로운 상태를 생성하는 순수 함수입니다. 이전 상태를 변경하지 않고 새로운 상태를 반환합니다. 리듀서는 액션의 타입에 따라서만 상태를 변경합니다.
4. 상태 업데이트: 리듀서에 의해 새로운 상태가 반환되고, 이 새로운 상태가 스토어에 의해 저장됩니다. 이로 인해 애플리케이션의 전체 상태가 변경됩니다.
5. 구독(Subscribe): 스토어의 상태가 업데이트될 때마다, 구독된 컴포넌트나 함수가 이를 감지하고 업데이트됩니다. 이를 통해 UI가 스토어의 상태 변경에 반응할 수 있습니다.

이러한 흐름을 통해 리덕스는 상태 관리를 중앙 집중화하고 예측 가능하게 만듭니다. 상태의 변화가 일어날 때마다 일관된 방식으로 처리되므로 상태의 흐름을 이해하고 디버깅하기 쉬워집니다.

 

---

부족한 글 읽어주셔서 감사합니다