Redux는 JavaScript 애플리케이션의 상태 관리를 도와주는 도구입니다.
❓React에서 Redux를 사용하는 이유?
1. 예측 가능한 상태 관리
: Redux는 애플리케이션의 상태를 일관되고 예측 가능한 방식으로 관리합니다. 모든 상태 업데이트는 순수 함수인 리듀서를 통해 이루어지며, 이러한 특징은 코드 디버깅과 테스트를 훨씬 쉽게 만듭니다.
2. 상태 로깅
: Redux 개발 도구는 상태 변화와 이에 대한 디버깅 정보를 로깅하는 데 도움이 됩니다. 이를 통해 개발자는 애플리케이션의 어느 시점에서든 상태를 검사하고, 이전 상태로 롤백하는 등의 작업을 할 수 있습니다.
3. 상태 퍼시스턴스
: Redux를 사용하면 사용자 세션 간에 상태를 유지하는 것이 간단해집니다. 이는 특히 페이지 새로고침이나 애플리케이션 재시작 같은 상황에서 유용합니다.
4. 컴포넌트 간 상태 공유
: Redux는 애플리케이션의 전역 상태를 저장하므로, 깊은 계층에 있는 컴포넌트간에 상태를 쉽게 공유할 수 있습니다. 이는 prop drilling이라는 문제를 해결하는 데 도움이 됩니다.
5. 시간여행 디버깅
: Redux는 각 상태 변경을 기록하므로, '시간여행' 디버깅이 가능해집니다. 이는 애플리케이션의 이전 상태로 돌아가거나, 특정 액션을 취소하는 등의 작업을 가능하게 합니다.
6. 미들웨어 지원
: Redux는 미들웨어를 지원하므로, 액션을 디스패치하기 전후에 추가적인 로직을 적용할 수 있습니다. 이는 비동기 작업 처리, 로깅, 에러 리포팅 등에 유용합니다.
하지만 Redux는 항상 필요한 것은 아닙니다. 작은 프로젝트에서는 종종 오버킬이 될 수 있으며, 복잡성과 관리 비용을 추가로 가져올 수 있습니다. 또한, React의 Context API와 Hooks를 활용하면, 많은 경우에 Redux 없이도 상태 관리를 충분히 수행할 수 있습니다. 따라서 애플리케이션의 규모, 복잡성, 요구사항 등을 고려하여 Redux의 사용 여부를 결정하는 것이 중요합니다.
Redux 기본 원리
Redux의 기본 원리는 상태 관리를 효율적이고 예측 가능하게 만드는 것입니다.
1. Store
: Redux에서는 애플리케이션의 모든 상태를 하나의 JavaScript 객체에 저장합니다. 이 객체를 "Store"라고 부릅니다. Store는 읽기 전용이며, 직접 수정할 수 없습니다. Store의 상태를 변경하려면 액션을 발행해야 합니다.
2. Action
: 액션은 애플리케이션에서 발생하는 모든 변경 사항을 나타내는 JavaScript 객체입니다. 각 액션은 type 필드를 반드시 포함해야 하며, 이외에도 추가적인 정보를 담을 수 있는 다른 필드들을 가질 수 있습니다.
3. Reducer
: Reducer는 상태 변경을 처리하는 순수 함수입니다. Reducer는 현재의 상태와 액션을 인자로 받아, 새로운 상태를 반환합니다. Redux 애플리케이션에서는 여러개의 reducer를 가질 수 있으며, 각 reducer는 상태 트리의 특정 부분을 관리합니다.
📌 Redux의 기본적인 흐름
사용자가 애플리케이션에서 인터랙션을 하면, 관련된 액션을 생성
⬇️
생성된 액션은 dispatch 함수를 통해 Redux store에 전달
⬇️
Redux store는 전달받은 액션을 알맞은 reducer에 전달
⬇️
Reducer는 현재 상태와 받은 액션을 바탕으로 새로운 상태를 생성
⬇️
Store는 이 새로운 상태를 현재 상태로 업데이트하고, 이 변경 사항을 애플리케이션에 전달 후 UI는 새로운 상태에 따라 업데이트
Redux의 이러한 원리는 애플리케이션의 상태 변경을 투명하고 예측 가능하게 만듭니다.
설치 방법
npm install @reduxjs/toolkit react-redux
🤷♀️사용하는 법
❗Redux 및 관련 개념에 대한 용어
1. Store
: Redux에서 상태를 저장하는 객체입니다. 이 Store는 애플리케이션의 전역 상태를 저장하고, getState를 사용하여 상태를 조회하거나 dispatch를 사용하여 액션을 발행할 수 있습니다.
2. Action
: 애플리케이션에서 일어난 변화를 나타내는 객체입니다. 각 액션은 type 속성을 필수로 가지며, 추가적으로 페이로드, 메타데이터 등을 가질 수 있습니다.
type 속성의 값은 일반적으로 문자열이며, 애플리케이션 내에서 유일(unique)해야 합니다.
액션 타입(Action Type)과 액션 생성자 함수(Action Creator)는 리덕스에서 상태 변화를 설명하고 실행하기 위한 중요한 개념입니다.
1) 액션 타입(Action Type)
액션 타입은 상태 변화를 식별하기 위한 문자열 또는 상수 값입니다.
보통 대문자와 밑줄(_)을 사용하여 작성하며, 스네이크 케이스(예: 'INCREMENT', 'DECREMENT')가 일반적입니다.
액션 타입은 액션을 고유하게 식별하는 역할을 하므로 중복되어서는 안됩니다.
Copy code
const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';2) 액션 생성자 함수(Action Creator)
액션 생성자 함수는 액션 객체를 생성하여 반환하는 함수입니다.
액션 객체는 반드시 type 속성을 가져야 하며, type은 액션 타입을 나타냅니다.
다른 속성들을 포함할 수 있으며, 이러한 속성들은 액션을 설명하고 데이터를 전달하는데 사용됩니다.
javascript
Copy code
function increment() {
return {
type: INCREMENT
};
}
function decrement() {
return {
type: DECREMENT
};
}이렇게 정의된 액션 생성자 함수를 호출하면 해당 액션 객체가 생성되고, 이 객체는 스토어에 디스패치(dispatch)되어 상태 변화를 트리거합니다.
액션 타입과 액션 생성자 함수는 리덕스에서 상태 변화를 예측 가능하고 일관되게 관리하는데 도움을 주는 중요한 구성 요소입니다. 이러한 구조를 사용하면 애플리케이션의 상태 관리를 보다 간결하고 효율적으로 할 수 있습니다.
3. Reducer
: 액션을 처리하는 함수입니다. Reducer는 이전 상태와 액션 객체를 인자로 받아 새로운 상태를 반환합니다. 이 함수는 순수 함수여야 하며, 이전 상태를 직접 수정하면 안됩니다.
4. Dispatch
: Redux store에 액션을 전달하는 메서드입니다. Dispatch 메서드는 액션을 인자로 받아 reducer에게 전달하며, 이를 통해 상태를 변경할 수 있습니다.
5. Middleware
: Redux의 액션 처리 과정 중간에 특정 작업을 할 수 있게 해주는 확장 기능입니다. 예를 들어, 비동기 작업을 처리하거나 액션을 로깅하는 등의 작업을 수행할 수 있습니다.
6. Action Creator
: 액션 객체를 생성하는 함수입니다. 일반적으로 각 액션 타입마다 하나의 액션 생성자가 있으며, 이를 통해 코드를 간결하게 유지할 수 있습니다.
7. Slice
: Redux Toolkit에서 제공하는 개념으로, 관련된 리듀서와 액션들을 한 군데에 모아놓은 것을 말합니다. 이를 사용하면 기존 Redux에서 복잡하게 관리해야 했던 액션 타입, 액션 생성 함수, 리듀서를 한 번에 관리할 수 있습니다.
8. Selector
: Store의 상태를 쉽게 선택할 수 있게 하는 함수입니다. 이를 통해 컴포넌트에서 필요한 상태를 쉽게 조회할 수 있습니다.
