Redux로 전역상태 관리하기
Redux란 무엇인가요?
Redux는 애플리케이션에서 상태 관리를 위한 라이브러리 입니다.
단일 상태 트리(single state tree) 개념을 사용해 애플리케이션의 상태를 중앙에서 관리하며
예측 가능한 방식으로 상태 변화를 처리합니다.
대규모 애플리케이션에서 상태관리의 복잡성을 줄이는데 도움을 주고
상태를 예측 가능하고 일관성 있게 관리할 수 있도록 도와줍니다.
Redux의 데이터 흐름에 대해 설명하기 (flux 패턴)
- Action: 애플리케이션의 상태를 변경하기 위한 요청입니다.
사용자의 입력이나 네트워크 응답 등에서 발생합니다. - Reducer: Action이 발생하면 Reducer가 현재 상태와 Action을 받아 새로운 상태를 반환합니다.
상태는 불변성을 유지하며 기존 상태를 복사하여 변경된 부분만 업데이트합니다. - Store: 애플리케이션의 모든 상태를 담고 있는 객체입니다.
상태는 하나의 중앙 Store에서 관리되며, Store는 Reducer에 의해 업데이트됩니다. - View: Store에서 상태를 구독하고 있다가 상태가 변경되면 View가 자동으로 업데이트됩니다.
데이터는 Action -> Reducer -> Store -> View의 순서로 단방향으로 흐르며, 이는 데이터 관리의 일관성을 유지하는 데 도움을 줍니다.
Action, Dispatch, Reducer, Store의 역할
(간단한 사용 예시코드도 함께 작성해 주세요.)
1. Action
- 역할:
Action은 애플리케이션에서 발생하는 사건을 기술하는 객체입니다.
Action 객체는 반드시type이라는 속성을 가지고 있으며 선택적으로 데이터를 포함할 수 있습니다. - 예시: 사용자가 버튼을 클릭했을 때 "증가" 액션을 발생시킬 수 있습니다.
const upAction = {
type: 'UP',
payload: 1,
};2. Dispatch
- 역할:
Dispatch는Action을Store에 보내는 역할을 합니다.
Store는 전달된Action을 받아서 적절한Reducer로 전달하고, 상태를 업데이트합니다. - 예시: 사용자가 버튼을 클릭하면 증가 액션을
Dispatch합니다.
store.dispatch(upAction);3. Reducer
- 역할:
Reducer는Action을 처리하여 새로운 상태를 반환하는 함수입니다.
기존 상태와Action을 입력받아 새로운 상태를 반환합니다.
Reducer는 순수 함수여야 하며 입력 값에만 의존하고 부수 효과(side effect)를 가지지 않아야 합니다. - 예시: 상태가 증가하는 로직을 포함한
Reducer함수입니다.
const counterReducer = (state = 0, action) => {
switch (action.type) {
case 'UP':
return state + action.payload;
case 'DOWN':
return state - action.payload;
default:
return state;
}
};4. Store
- 역할:
Store는 애플리케이션의 상태를 관리하는 객체입니다.
상태를 저장하고Action을Dispatch하며 상태가 변경될 때마다
구독자(subscriber)에게 알리는 역할을 합니다. - 예시:
Redux Store를 생성하는 코드입니다.
import { createStore } from 'redux';
const store = createStore(counterReducer);
// 초기 상태 조회
console.log(store.getState()); // 출력: 0
// 상태 변경 (Action Dispatch)
store.dispatch(upAction);
console.log(store.getState()); // 출력: 1
store.dispatch({ type: 'DOWN', payload: 1 });
console.log(store.getState()); // 출력: 0
useDispatch() 와 useSelector()의 역할
useDispatch()
- 역할: Redux 스토어에 액션(action)을 보내기 위한 함수(
dispatch)를 반환합니다.
useSelector()
- 역할: Redux 스토어의 상태(state)에서 필요한 부분을 선택(select)하여 가져오는 역할을 합니다.
Redux-Thunk란 무엇인가요?
Thunk는 Redux 앱에서 비동기 로직을 작성하기 위한 표준적인 접근 방식 이며 일반적으로 데이터 페칭에
사용됩니다. 그러나 다양한 작업에 사용할 수 있으며 동기 및 비동기 로직을 모두 포함할 수 있습니다.
Redux Toolkit으로 전역상태 관리하기
Redux Toolkit이란 무엇인가요 ?
Redux Toolkit은 Redux애플리케이션을 개발할 때 발생하는 반복적이고 복잡한 작업을 간소화하기 위해 제공되는 공식 패키지입니다. Redux는 상태 관리를 위해 널리 사용되는 JavaScript 라이브러리인데
(설정이 다소 복잡하고 보일러플레이트 코드가 많다는 단점이 있습니다.)
이러한 문제를 해결하기 위해 Redux Toolkit이 도입되었습니다.
Redux와 차이점은 무엇인가요?
- Redux는 설정과 보일러플레이트 코드가 많지만 Redux Toolkit은
configureStore,createSlice등을 통해 설정을 단순화하고 코드를 줄여줍니다. - Redux에서는 리듀서를 작성할 때 불변성을 직접 관리해야 하지만 Redux Toolkit은 자동으로 불변성을 관리해주고 리듀서와 액션 생성자를 함께 생성해줍니다.
- Redux에서는 비동기 로직을 관리하려면 추가 설정이 필요하지만 Redux Toolkit은
createAsyncThunk를 통해 비동기 작업을 쉽게 처리할 수 있습니다.
Redux Toolkit은 Redux의 복잡성을 줄이고 사용을 쉽게 하기 위해 만들어진 도구입니다.
createSlice(), configureStore() 의 역할
(간단한 사용 예시코드도 함께 작성해 주세요.)
createSlice()
- 역할:
createSlice는 Redux의 리듀서와 액션을 함께 생성해주는 함수입니다.
상태의 초기값, 리듀서 함수, 그리고 액션 타입을 정의할 수 있습니다.
createSlice는 내부적으로 액션 생성자와 타입을 자동으로 생성해 주기 때문에 보일러플레이트 코드가 줄어듭니다.
import { configureStore, createSlice } from '@reduxjs/toolkit';
// 1. createSlice로 상태, 리듀서, 액션 생성
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment: state => { state.value += 1 }, // 액션 함수 정의
decrement: state => { state.value -= 1 },
reset: state => { state.value = 0 }
}
});configureStore()
configureStore는 Redux 스토어를 설정하고 생성하는 함수입니다.
이 함수는 미들웨어, Redux DevTools 통합, 리듀서 결합 등의 설정을 간편하게 할 수 있도록 도와줍니다.
// 액션 추출
export const { increment, decrement, reset } = counterSlice.actions;
// 2. configureStore로 스토어 생성
const store = configureStore({
reducer: {
counter: counterSlice.reducer
}
});
// 스토어 사용 예시
store.dispatch(increment()); // 상태가 1 증가
store.dispatch(decrement()); // 상태가 1 감소
store.dispatch(reset()); // 상태가 0으로 리셋
console.log(store.getState()); // { counter: { value: 0 } }Redux Toolkit에서 Thunk 사용법
→ createAsyncThunk()란?
createAsyncThunk()는 Redux Toolkit에서 비동기 작업(예: API 호출)을 간단하게 처리할 수 있도록 도와주는 유틸리티 함수입니다.
비동기 작업의 상태(요청 중, 성공, 실패)를 자동으로 관리하고 해당 상태에 맞는 액션을 자동으로 생성해줍니다.
createAsyncThunk()의 사용법:
- 비동기 작업 정의:
createAsyncThunk를 사용해 비동기 작업을 정의합니다. - 리덕스에 비동기 작업 상태 추가: 비동기 작업의 상태(요청 중, 성공, 실패)를 처리하는 리덕스를
extraReducers에서 정의합니다.
