Redux는 JavaScript 애플리케이션에서 상태 관리를 위한 패턴과 라이브러리입니다. Redux를 사용하면 중앙 집중식 스토어로 애플리케이션의 상태를 관리할 수 있습니다. 이 글에서는 Redux에서 데이터를 어떻게 관리하는지에 대해 알아보겠습니다.
액션(Action)
Redux에서 상태를 변경하기 위해 사용되는 첫 번째 개념은 액션입니다. 액션은 애플리케이션에서 수행되어야 하는 작업을 나타내는 객체입니다. 예를 들어, 사용자가 로그인 버튼을 클릭하면 “로그인”이라는 액션이 생성될 수 있습니다.
액션은 일반적으로 다음과 같은 형식을 가집니다:
{
type: 'ACTION_TYPE',
payload: { /* 액션에 필요한 데이터 */ }
}
액션 객체에는 type 필드가 있어야 합니다. 이 필드는 해당 액션의 종류를 나타내는 문자열입니다. 추가적인 데이터가 필요한 경우 payload 필드를 사용하여 데이터를 전달할 수 있습니다.
리듀서(Reducer)
리듀서는 Redux 스토어에서 상태를 변경하는 로직을 담당합니다. 리듀서는 이전 상태와 액션을 입력으로 받아 새로운 상태를 반환합니다. 이전 상태는 변경되지 않아야 하고, 액션에 따라 새로운 상태를 생성하거나 변환해야 합니다.
리듀서는 일반적으로 다음과 같은 형식을 가집니다:
(const initialState = { /* 초기 상태 */ } )
function reducer(state = initialState, action) {
switch(action.type) {
case 'ACTION_TYPE':
// 상태 변경 로직
return { /* 새로운 상태 */ };
default:
return state;
}
}
리듀서 함수는 state와 action 두 개의 인자를 받습니다. state는 이전 상태이고, action은 수행된 액션입니다. switch 문을 사용하여 액션의 종류에 따라 적절한 상태 변경 로직을 실행합니다.
스토어(Store)
Redux 스토어는 애플리케이션의 상태를 저장하고, 액션을 디스패치하여 상태를 변경하는 역할을 합니다. 스토어는 리듀서를 인자로 받아 생성되며, getState() 메서드를 사용하여 현재 상태를 가져올 수 있습니다. 또한, dispatch(action) 메서드를 사용하여 액션을 디스패치하고 상태를 변경할 수 있습니다.
Redux 스토어를 생성하는 방법은 다음과 같습니다:
import { createStore } from 'redux';
const store = createStore(reducer);
이제 생성한 스토어를 이용하여 액션을 디스패치하고 상태를 변경할 수 있습니다.
결론
Redux는 상태 관리 패턴과 라이브러리로, 액션, 리듀서, 스토어의 개념을 활용하여 데이터를 관리합니다. 액션은 애플리케이션에서 수행되어야 하는 작업을 나타내고, 리듀서는 액션에 따라 상태를 변경합니다. 스토어는 상태를 저장하고 액션을 디스패치하여 상태를 변경합니다. Redux를 사용하면 간편하고 예측 가능한 상태 관리를 할 수 있습니다.
참고문헌: