REACT Redux
Redux란?
▶ Redux는 JavaScript 애플리케이션의 상태 관리를 위해 설계된 오픈 소스 라이브러리로, 주로 React와 함께 사용됩니다. Redux는 애플리케이션의 상태를 예측 가능하고 쉽게 관리할 수 있게 해주는데 오늘은 그런 Redux의 주요 개념과 원리에 대해 알아보도록 하겠습니다!
1. 상태(State)
▶ Redux에서는 애플리케이션의 모든 상태를 하나의 중앙 저장소(Store)에 저장합니다. 이 상태는 변경 불가능한 객체로, 애플리케이션의 모든 상태를 포함하고 있습니다.
2. 액션(Action)
▶ 액션은 상태를 변경하기 위한 유일한 방법입니다. 액션은 간단한 자바스크립트 객체로, 상태를 어떻게 변경할지 설명하는 type 속성과 필요에 따라 추가적인 데이터를 포함할 수 있습니다. 예를 들어, type이 ADD_TODO인 액션은 새로운 할 일을 추가하는 기능을 의미할 수 있습니다.
1
2
3
4
5
6
7
const addAction = {
type: 'ADD_TODO',
payload: {
id: 1,
text: 'Learn Redux'
}
};
3. 리듀서(Reducer)
▶ 리듀서는 상태를 실제로 변경하는 순수 함수입니다. 리듀서는 현재 상태와 액션을 인자로 받아 새로운 상태를 반환합니다. 리듀서는 이전 상태를 변경하지 않고, 새로운 상태 객체를 반환하여 상태 변경을 수행합니다.
1
2
3
4
5
6
7
8
function todoReducer(state = [], action) {
switch(action.type) {
case 'ADD_TODO':
return [...state, action.payload];
default:
return state;
}
}
4. 스토어(Store)
▶ 스토어는 상태를 보관하고 관리하는 객체입니다. 애플리케이션에는 하나의 스토어만 있어야 하며, 스토어는 상태를 읽고 업데이트하는 방법을 제공합니다. 스토어는 createStore 함수를 사용해 생성합니다.
1
2
3
import { createStore } from 'redux';
const store = createStore(todoReducer);
5. 디스패치(Dispatch)
▶ 디스패치는 액션을 스토어에 보내는 방법입니다. 액션이 스토어에 디스패치되면, 스토어는 해당 액션을 리듀서에 전달하여 상태를 업데이트합니다.
1
store.dispatch(addAction);
6. 구독(Subscribe)
▶ 구독은 상태가 변경될 때마다 특정 함수를 호출하도록 하는 방법입니다. 이는 주로 UI를 업데이트하거나 다른 작업을 수행하는 데 사용됩니다.
1
2
3
store.subscribe(() => {
console.log(store.getState());
});
Redux의 장점
- 예측 가능성: 모든 상태 변화를 중앙에서 관리하여 애플리케이션의 동작을 예측 가능하게 합니다.
- 디버깅 용이: 상태 변화가 순차적으로 기록되기 때문에 디버깅이 쉽습니다.
- 유지 보수성: 상태와 UI 로직을 분리하여 코드의 가독성과 유지 보수성을 높입니다.
Redux의 단점
▶ Redux는 강력한 상태 관리 도구지만, 복잡성을 증가시키고 보일러플레이트 코드를 많이 요구하며, 학습 곡선이 급격한 단점이 있습니다. 때문에 작은 프로젝트에서는 오히려 Redux 없이 상태 관리를 하는 것이 더 효율적일 수 있으며, 이러한 단점들을 고려하여, 프로젝트의 요구 사항과 규모에 맞게 Redux를 사용할지 여부를 결정하는 것이 중요합니다. 최근에는 이러한 단점을 보완하기 위해 Redux Toolkit과 같은 도구가 등장하여 설정과 사용을 더 간편하게 하고 있습니다.
보일러플레이트 코드(boilerplate code)
소프트웨어 개발에서 반복적으로 자주 사용되며 거의 변하지 않는 코드 블록을 의미합니다. 보일러플레이트 코드는 주로 초기 설정이나 기본 구조를 잡는 데 사용됩니다.
이렇게 오늘은 Redux에 대해 알아봤는데요,
면접에서도 충분히 나올 수 있는 질문인만큼 미리 공부해두면 좋을 것 같네요! 그렇다면 저는 다음에 또다른 면접에 대비한 내용을 들고오도록 하겠습니다 😁!