Redux 상태관리의 주요 개념들과 연결 관계를 설명해주세요. 다른 상태관리 도구와 비교 설명 해주세요

Redux란?

javascrpit의 상태관리 라이브러리

 

Redux의 주요 개념으로는 Action, Dispatch, Reducer, Store가 있으며, Action → Dispatch → Reducer → Store 순서로 데이터가 단방향으로 흐르게 됩니다.

Action은 말 그대로 어떤 액션을 취할 것인지 정의해 놓은 객체입니다. 해당 Action 객체가 어떤 동작을 하는지 명시해주는 type 속성을 가집니다.

Dispatch는 Reducer로 Action을 전달해주는 함수입니다. Dispatch의 전달인자로 Action 객체가 전달되며. Action 객체를 전달받은 Dispatch 함수는 Reducer를 호출합니다.

Reducer는 Dispatch에게서 전달받은 Action 객체의 type 값에 따라서 상태를 변경시키는 함수로, Reducer가 리턴하는 값이 새로운 상태가 됩니다. 이 때, Reducer는 순수함수여야 합니다.

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

Store는 Redux의 전역 저장소로, Redux 앱의 state가 저장되어 있는 오직 하나뿐인 저장소의 역할을 합니다.

 

다른 상태관리 도구 비교

Zustand는 간결하고 유연한 상태 관리 라이브러리로, 작은 규모의 프로젝트에 적합하며, 작은 학습 곡선을 가집니다. 자유로운 상태 관리 구조와 훅 기반의 설계를 통해 필요한 상태만 컴포넌트에 주입할 수 있습니다. 하지만 규모가 큰 애플리케이션에서는 상태 관리가 복잡해질 수 있으며, Redux처럼 거대한 생태계와 도구 지원이 떨어집니다.

 

Recoil은 React의 동작 및 생산성과 잘 어울리는 상태 관리 라이브러리입니다. Atom과 Selector를 사용해 유연하고 모듈화된 상태 관리를 제공하며, 규모에 상관없이 사용할 수 있습니다. 세분화된 상태 관리와 계산된 상태를 지원합니다. 단점으로는 개발 생태계가 Redux만큼 크지 않고, 이론적인 토대와 용어에 익숙해지는 데 시간이 필요할 수 있습니다.

 

---

질문: Redux의 주요 개념들은 무엇인가요?
답변: Redux의 주요 개념들은 action, reducer, store입니다. Action은 어떤 변화가 일어날지 나타내는 객체이고, reducer는 action에 따라 상태를 어떻게 변경할지 정의해놓은 함수입니다. Store는 애플리케이션 전체의 상태를 저장하는 객체입니다.

질문: Redux와 MobX의 차이점은 무엇인가요?
답변: Redux는 순수한 함수를 사용하여 상태를 변경하는 반면, MobX는 관찰 가능한 상태를 사용하여 자동으로 상태를 관리합니다. Redux는 더 엄격한 패턴을 따르고, MobX는 더 유연한 접근 방식을 취합니다.

질문: Redux에서 미들웨어의 역할은 무엇인가요?
답변: 미들웨어는 액션과 리듀서 사이에 동작하는 코드로, 액션을 디스패치할 때 사전 처리를 하거나, 리듀서에서 상태를 변경하기 전에 추가 작업을 수행할 수 있습니다.

질문: Redux 세 가지 원칙에 대해 설명해주세요.
답변: Redux의 세 가지 원칙은 Single source of truth, State is read-only, Changes are made with pure functions 입니다. 상태를 저장하는 스토어는 단일성을 유지하며, 상태를 변경할 때에는 액션을 통해서만 가능합니다. 리듀서는 순수한 함수로 상태를 변경합니다.

질문: Thunk와 Saga 비교
답변: Thunk와 Saga는 Redux에서 비동기 작업을 처리하는 미들웨어입니다. Thunk는 함수를 액션 크리에이터로 전달하여 처리하는 반면, Saga는 제너레이터 함수를 사용하여 비동기 작업을 처리합니다. Saga는 복잡한 비동기 작업이나 취소 기능 등에 더 유용하다고 여겨집니다.

질문: Redux의 주요 사용 사례는 무엇인가요?
답변: Redux는 주로 React와 함께 사용되어, 글로벌 상태 관리를 조정하고 애플리케이션의 복잡성을 줄이는데 도움이 됩니다.

질문: Immer와 함께 Redux를 사용하는 이유는 무엇인가요?
답변: Immer 라이브러리는 불변성을 유지하면서 상태를 간단하게 변경할 수 있도록 도와줍니다. Redux에서는 불변성을 유지하는 것이 중요하므로, Immer와 함께 사용할 경우 개발자에게 유익합니다.

 

질문: useSelector와 useDispatch의 역할은 무엇인가요?
답변: useSelector와 useDispatch는 리액트-리덕스 라이브러리의 훅입니다. useSelector는 스토어의 상태를 구독하고, 해당 값을 컴포넌트의 상태로 전달해줍니다. useDispatch는 액션들을 디스패치하는 함수를 반환하여 컴포넌트에서 사용할 수 있게 합니다.

 

질문: Redux-Toolkit이 제공하는 주요 기능은 무엇인가요?
답변: Redux-Toolkit은 액션 생성 함수와 슬라이서를 생성하기 위한 createSlice, 비동기 작업을 위한 createAsyncThunk, 쉽게 상태 관리를 설정할 수 있도록 도와주는 configureStore 등의 유틸리티 함수를 제공합니다.