Redux란
Redux는 JavaScript 애플리케이션에서 상태(state)를 관리하기 위한 도구입니다. Redux는 "단방향 데이터 흐름"을 기반으로 합니다. 애플리케이션의 상태는 하나의 "스토어"에 저장되고, 상태를 변경하는 모든 작업은 "액션"을 통해 이루어집니다. 이러한 액션은 상태를 변경하는 "리듀서" 함수에 전달됩니다. 리듀서는 이전 상태와 액션을 기반으로 새로운 상태를 계산하고, 이를 다시 스토어에 저장합니다. 이를 통해 상태의 변경을 예측 가능하고 디버깅이 용이하도록 만들 수 있습니다. Redux는 상태 관리를 보다 효율적이고 예측 가능하게 만들어주므로, 대규모 애플리케이션에서 유용하게 사용됩니다.
단방향 데이터 흐름
- 상태는 특정 시점의 앱 상태를 설명합니다.
- UI는 해당 상태를 기반으로 렌더링됩니다.
- 어떤 일이 발생하면(예: 사용자가 버튼을 클릭하는 경우) 발생한 상황에 따라 상태가 업데이트됩니다.
- 새로운 상태에 따라 UI가 다시 렌더링됩니다.
그러나 동일한 상태를 공유하고 사용해야 하는 여러 구성 요소가 있는 경우 , 특히 해당 구성 요소가 응용 프로그램의 다른 부분에 있는 경우 단순성이 무너질 수 있습니다. Redux는 상태 관리와 관련된 개념을 정의 및 분리하고 뷰와 상태 간의 독립성을 유지하는 규칙을 적용함으로써 코드에 더 많은 구조와 유지 관리성을 제공합니다.
action
action은 상태(state)를 변경하기 위해 발생하는 이벤트를 정의한 객체입니다.
reducer
reducer는 state의 현재 상태 와 action 객체를 수신하고 필요한 경우 상태를 업데이트하는 방법을 결정하고 새 상태를 반환하는 함수입니다 (state, action) => newState. reducer는 받은 액션(이벤트) 유형에 따라 이벤트를 처리하는 이벤트 리스너로 생각할 수 있습니다.
reducer의 규칙
- 이전 상태(state)와 액션(action)을 인자로 받습니다.
reducer 함수는 이전 상태와 액션을 인자로 받아 새로운 상태를 계산합니다. 이전 상태는 변경되지 않고, 새로운 상태를 반환합니다. - 새로운 상태를 반환합니다.
reducer 함수는 항상 새로운 상태를 반환합니다. Redux는 이전 상태와 새로운 상태를 비교하여 변경된 부분만 업데이트합니다. - 불변성을 유지해야 합니다.
reducer 함수에서 반환하는 새로운 상태는 이전 상태와 다른 객체이어야 합니다. 이전 상태를 직접 변경하지 않고, 이전 상태의 값을 참조하여 새로운 객체를 만들어 반환해야 합니다. 이를 통해 불변성(immutability)을 유지할 수 있습니다.
store
store는 애플리케이션의 상태(state)를 중앙 집중적으로 관리하는 객체입니다. store는 getState 메서드를 제공하여, 현재 상태를 반환할 수 있습니다. 이를 통해 애플리케이션의 상태를 확인하거나, 상태에 따라 다른 작업을 수행할 수 있습니다.
dispatch
dispatch는 store에서 액션(action)을 처리하여 상태(state)를 변경하는 메서드입니다. dispatch 메서드는 액션 객체와 현재 상태(state)를 reducer 함수에 전달하여, 새로운 상태를 계산합니다. 이전 상태와 새로운 상태를 비교하여 변경된 부분만 업데이트하므로, 상태를 효율적으로 관리할 수 있습니다. dispatch 메서드는 상태가 변경될 때마다 등록된 리스너(listener) 함수를 실행합니다. 이를 통해 상태 변화에 대한 반응을 정의할 수 있습니다.
selectors
selectors는 상태(state)에서 필요한 데이터를 추출하는 함수입니다. selector 함수는 상태를 인자로 받아 필요한 데이터를 계산하여 반환합니다. selectors를 사용하면 상태의 일부분만 가져오거나 계산된 데이터를 반환하여 컴포넌트에서 필요한 데이터만을 전달할 수 있으므로, 애플리케이션의 성능을 향상시킬 수 있습니다.
정리 (동작 방식)
- 애플리케이션의 상태(state)가 스토어(store)에 저장됩니다. 스토어는 상태를 중앙 집중적으로 관리하며, getState 메서드를 통해 현재 상태를 반환할 수 있습니다.
- 사용자 입력 또는 API 요청 등에 의해 액션(action)이 생성됩니다. 액션은 type 프로퍼티를 필수로 가지며, 추가적인 데이터를 가질 수 있습니다.
- 액션은 디스패치(dispatch) 메서드를 통해 스토어로 전달됩니다.
- 스토어는 전달받은 액션을 reducer 함수에 전달하여, 새로운 상태를 계산합니다. reducer 함수는 이전 상태와 액션을 인자로 받습니다.
- reducer 함수는 이전 상태(state)와 액션(action)을 바탕으로 새로운 상태를 계산하여 반환합니다. 새로운 상태는 이전 상태를 변경하지 않고, 새로운 객체를 반환하여 불변성(immutability)을 유지합니다.
- 스토어는 새로운 상태를 저장하고, 리스너(listener) 함수를 실행합니다. 리스너 함수는 상태의 변화에 대한 반응을 정의할 수 있습니다.
