2. Redux가 무엇인가요, 왜 Redux를 사용하시나요?
-
Redux Toolkit은 Redux 로직을 작성하기 위해 저희가 공식적으로 추천하는 방법입니다. RTK는 Redux 앱을 만들기에 필수적으로 여기는 패키지와 함수들을 포함합니다. 대부분의 Redux 작업을 단순화하고, 흔한 실수를 방지하며, Redux 앱을 만들기
쉽게 해주는 모범 사례를 통해 만들어졌습니다. -
Can I use Redux without Redux toolkit?
: Note that you are not required to use Redux Toolkit to use Redux. There are many existing applications that use other Redux wrapper libraries, or write all Redux logic "by hand", and if you still prefer to use a different approach, go ahead! However, we strongly recommend using Redux Toolkit for all Redux apps
리덕스란?
: JS앱을 위한 예측 가능한 상태 컨테이너.
'액션'이라고 불리는 이벤트들을 사용해 애플리케이션의 상태를 관리하고 업데이트하는 패턴이자 도구. 애플리케이션 전역에서 필요한 상태들을 관리하기 위해 중앙화된 store(저장소?) 역할을 한다. 상태들이 예측가능한 상황에서만 업데이트되도록 보장한다.
리덕스를 왜 사용할까?
: 애플리케이션의 여러 부분에서 필요한 상태들을 전역적으로 관리할 수 있다. 언제, 어디서, 왜, 어떻게 상태가 업데이트되는지 파악하기 용이.
리덕스를 언제 사용할까?
: 리덕스의 단점으로는, 학습 내용 증가, 길어지는 코드, indirection 추가 (참조, In computer programming, an indirection (also called a reference) is a way of referring to something using a name, reference, or container instead of the value itself), 따라야 하는 제한 사항들을 들 수 있는데,
이러한 리덕스가 유용하게 사용되는 경우는 다음과 같다.
- 여러 군데에서 많은 상태들이 쓰일 때
- 애플리케이션 상태가 시간 흐름에 따라 빈번히 업데이트될 때
- 상태 업데이트의 로직이 복잡할 때
- 애플리케이션이 중간 또는 대규모의 코드베이스를 가지거나
다수의 인원이 작업할 때
https://ko.redux.js.org/tutorials/essentials/part-1-overview-concepts
Redux는 자바스크립트 애플리케이션에서 예측 가능한 상태 관리를 제공하는 라이브러리입니다. 주로 React와 함께 사용되지만, React에 종속적인 것은 아닙니다. Redux의 주요 개념들과 이들의 역할, 사용법을 정리해보면 다음과 같습니다:
1. Store (스토어)
- 역할: 애플리케이션의 전체 상태(state)를 보관하는 저장소.
- 사용법: 스토어는 하나의 객체로서 애플리케이션 내의 모든 상태를 중앙에서 관리합니다. 스토어는 상태를 조회하거나 업데이트할 수 있도록 메서드를 제공합니다.
import { createStore } from 'redux';
const store = createStore(reducer);createStore 함수는 리듀서를 인자로 받아 스토어를 생성합니다. 이 스토어를 통해 상태를 관리할 수 있습니다.
2. Actions (액션)
- 역할: 상태에 어떤 변화가 일어나야 하는지를 설명하는 객체. 액션은 항상 type이라는 속성을 가지고 있어야 하며, 상태 업데이트에 필요한 데이터를 담을 수 있습니다.
- 사용법: 액션은 단순히 상태 업데이트에 대한 명령을 나타내며, 액션 생성자 함수를 통해 생성할 수 있습니다.
const increment = () => {
return {
type: 'INCREMENT'
};
};여기서 increment는 액션 생성자입니다. type: 'INCREMENT'는 액션의 종류를 나타내는 문자열입니다.
3. Reducers (리듀서)
- 역할: 액션을 기반으로 상태를 어떻게 업데이트할지를 정의하는 순수 함수. 리듀서는 이전 상태와 액션을 인자로 받아 새로운 상태를 반환합니다.
- 사용법: 리듀서는 상태 변경 로직을 포함하며, 상태는 절대로 직접 변경하지 않고 새로운 상태 객체를 반환해야 합니다.
const counterReducer = (state = { count: 0 }, action) => {
switch(action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
default:
return state;
}
};여기서 counterReducer는 상태 관리 로직을 포함한 함수로, 액션의 타입에 따라 상태가 변하게 됩니다.
4. Dispatch (디스패치)
- 역할: 액션을 스토어에 전달하는 함수. 스토어의 상태를 변경하려면 dispatch 메서드를 사용하여 액션을 전달해야 합니다.
- 사용법: 디스패치 메서드는 액션 객체를 인자로 받아, 리듀서가 이를 처리하게 합니다.
store.dispatch({ type: 'INCREMENT' });store.dispatch()를 사용하여 액션을 스토어에 전달하면, 리듀서가 호출되어 상태를 업데이트합니다.
5. Selectors (셀렉터)
- 역할: 스토어에서 상태를 추출하고 변환하는 함수. 셀렉터는 상태의 특정 부분만 선택하여 컴포넌트가 필요로 하는 데이터를 반환합니다.
- 사용법: 셀렉터는 상태를 더 효율적으로 가져오는 데 사용됩니다. 특히 상태가 복잡해질수록 셀렉터를 사용하여 필요한 데이터만 가져오는 것이 중요합니다.
const selectCount = (state) => state.count;
const currentCount = selectCount(store.getState());위 예시에서 selectCount는 상태 객체에서 count 값을 추출하는 셀렉터입니다.
6. Middleware (미들웨어)
- 역할: 액션이 리듀서에 도달하기 전에 가로채어 변환하거나, 로깅, 비동기 처리 등을 할 수 있게 해주는 함수.
- 사용법: 미들웨어는 Redux의 기본 동작을 확장하거나 변경할 때 사용되며, 대표적인 미들웨어로는 Redux Thunk와 Redux Saga가 있습니다.
const loggerMiddleware = store => next => action => {
console.log('dispatching', action);
let result = next(action);
console.log('next state', store.getState());
return result;
};
const store = createStore(reducer, applyMiddleware(loggerMiddleware));이 예시에서 loggerMiddleware는 액션이 디스패치될 때마다 이를 콘솔에 출력해주는 역할을 합니다.
7. Combine Reducers (리듀서 합치기)
- 역할: 애플리케이션의 상태가 복잡해지면, 여러 개의 리듀서를 하나의 리듀서로 결합할 수 있습니다.
- 사용법: combineReducers를 사용하면 여러 리듀서를 독립적으로 관리할 수 있습니다.
import { combineReducers } from 'redux';
const rootReducer = combineReducers({
counter: counterReducer,
user: userReducer
});
const store = createStore(rootReducer);위 코드에서 counterReducer와 userReducer를 하나의 rootReducer로 합쳐서 스토어에 전달하고 있습니다.
8. Redux Thunk
- 역할: Redux는 원래 동기적으로 동작하지만, Thunk는 비동기 액션을 처리할 수 있게 해주는 미들웨어입니다.
- 사용법: 비동기 API 호출이 필요할 때 Thunk를 사용하여 액션 생성자가 함수를 반환하도록 할 수 있습니다.
const fetchData = () => {
return (dispatch) => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => dispatch({ type: 'FETCH_SUCCESS', payload: data }));
};
};이 예시에서 fetchData는 API에서 데이터를 가져와 성공적으로 받아오면 FETCH_SUCCESS 액션을 디스패치합니다.
9. Redux DevTools
- 역할: Redux 애플리케이션을 디버깅할 수 있는 도구.
- 사용법: Redux DevTools를 설치하면, 브라우저에서 상태 변화와 액션 디스패치를 실시간으로 추적할 수 있습니다.
const store = createStore(
rootReducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);DevTools를 활성화하면 상태와 액션을 시간 순으로 확인하고, 시간을 되돌려가며 디버깅할 수 있습니다.
이러한 Redux의 주요 개념들을 활용하면 애플리케이션의 상태를 체계적으로 관리하고, 예측 가능한 방식으로 상태 변경을 처리할 수 있습니다.
