Redux

Javascript의 상태 관리 라이브러리

Redux는 React와 함께 사용되는 것이 일반적이며, React에서 Redux를 사용하면 앱의 전역 상태를 보다 효율적으로 관리할 수 있다.

Redux의 데이터 흐름

React 컴포넌트 트리 내에서 상태를 전파하는 대신, Redux store를 사용하여 상태를 중앙 집중화하고, 이를 컴포넌트에서 손쉽게 접근하고 변경할 수 있습니다.

Redux의 구조

Redux는 액션 (Action), 리듀서 (Reducer), 스토어 (Store)로 이루어져 있습니다.

액션: 상태 변경을 위한 객체입니다. 액션 객체는 상태 변경에 필요한 정보를 포함하고, 애플리케이션의 다른 부분에서 이를 참조할 수 있습니다.

리듀서: 상태를 변경하는 함수입니다. 액션 객체를 받아 이를 처리하고, 새로운 상태를 반환합니다.(이 떄 리듀서는 일반함수가 아닌 순수함수이다.)

스토어: 상태를 저장하고 관리하는 객체입니다. 스토어를 통해 상태를 변경하거나, 상태 변경에 따른 처리 로직을 실행할 수 있습니다.

Redux의 순서

1. 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성됩니다.

2. 이 Action 객체는 Dispatch 함수의 인자로 전달됩니다.

3. Dispatch 함수는 Action 객체를 Reducer 함수로 전달해 줍니다.

4. Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경합니다.

5. 상태가 변경되면, React는 화면을 다시 렌더링 합니다.

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

React Hooks

useSelector()

useSelector()는 컴포넌트와 state를 연결하여 Redux의 state에 접근할 수 있게 해주는 메서드입니다.

useDispatch()

useDispatch()는 Action 객체를 Reducer로 전달해 주는 Dispatch 함수를 반환하는 메서드입니다. 위에서 Dispatch를 설명할 때 사용한 dispatch 함수도 useDispatch()를 사용해서 만든 것입니다.

Flux 패턴

Flux는 Facebook에서 개발한 웹 애플리케이션 아키텍처 패턴입니다.

Flux는 단방향 데이터 흐름을 가지는 아키텍처로, 애플리케이션의 데이터 흐름이 일관되게 유지되도록 설계되었습니다.

Flux의 구성요소

1. 액션 (Action): 애플리케이션에서 발생하는 이벤트 또는 사용자 입력에 대한 데이터입니다. 액션은 애플리케이션에서 상태 변경이 필요한 경우 발생하며, 액션은 애플리케이션 전체에서 유일한 ID를 가지며, 액션에는 type과 payload라는 두 가지 속성이 있습니다.

2. 디스패처 (Dispatcher): 액션을 전달받아 스토어에게 전달합니다. 디스패처는 전체 애플리케이션에서 유일한 객체입니다.

3. 스토어 (Store): 애플리케이션의 상태를 저장하는 역할을 합니다. 스토어는 애플리케이션의 모든 상태를 저장하며, 애플리케이션에서 스토어를 직접 변경할 수 없습니다. 대신, 스토어에 상태를 변경하는 방법은 액션을 전달하는 것 뿐입니다.

4. 뷰 (View): 스토어에서 상태를 가져와서 사용자에게 표시하는 역할을 합니다. 뷰는 스토어에서 상태가 변경될 때마다 자동으로 업데이트됩니다.

Flux 패턴은 단방향 데이터 흐름으로 설계되어 있기 때문에, 상태 변경에 대한 추적과 디버깅이 용이하며, 애플리케이션의 유지 보수와 테스트에 용이합니다.