하얀 코딩

[Redux - 1] Redux란? 본문

Redux

[Redux - 1] Redux란?

whitecoding 2023. 9. 20. 01:00

자바스크립트 싱글 페이지 애플리케이션이 갖추어할 요건이 점점 더 복잡해지고있는 만큼, 

어느 때보다도 많은 상태를 자바스크립트 코드로 관리할 필요가 생겨났습니다. 

여기에서 상태에는 서버 응답, 캐시 데이터, 지역적으로 생성해서 사용하고 있지만 

아직 서버에 저장되지 않은 데이터를 의미합니다. 

이외에도 활성화된 라우트, 선택된 탭, 로딩을 보여줄지 여부, 페이지네이션 컨트롤 등 다양한 UI 상태도 포함합니다.


Redux는 크게 세 가지의 핵심 원칙을 기반으로 합니다.

 

1. 단일 진실의 원천 (Single Source of Truth)

애플리케이션의 모든 상태는 하나의 저장소 (store)에 저장됩니다. 

이로 인해 앱의 상태를 디버깅하거나 조사할 때 훨씬 쉬워집니다.

2. 상태는 읽기 전용 (State is Read-Only)

UI 컴포넌트나 네트워크 콜백과 같은 코드에서는 상태를 직접 수정할 수 없습니다.

상태를 변경하려면 액션 (action)이라는 객체를 발행해야 합니다.

3. 변화는 순수 함수로 작성 (Changes Are Made with Pure Functions)

액션에 의해 상태가 어떻게 변경되는지를 명시하는 함수를 리듀서 (reducer)라고 합니다. 

리듀서는 순수 함수로서, 같은 입력에 대해서는 항상 같은 출력을 반환해야 합니다.


Redux의 장점 중 하나는 애플리케이션의 상태 변화를 중앙 집중적으로 관리하면서 예측 가능하게 만드는 것입니다. 

또한, 개발자 도구와 함께 사용하면 상태 변화의 기록을 볼 수 있고, 이전 상태로 롤백하거나 재생하는 등의 디버깅 기능을 활용할 수 있습니다.

그러나 Redux를 사용하면 코드의 복잡성이 증가할 수 있기 때문에

프로젝트의 요구 사항과 규모를 고려하여 Redux를 사용할지 여부를 결정하는 것이 좋습니다.

 

이글의 모든 내용은 공식문서에 내용을 요약했습니다.

https://ko.redux.js.org/

 

Redux - 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너. | Redux

자바스크립트 앱을 위한 예측 가능한 상태 컨테이너.

ko.redux.js.org

'Redux' 카테고리의 다른 글

[Redux - 5] Action  (0) 2023.09.23
[Redux - 4] Reducer  (0) 2023.09.23
[Redux - 3] Store  (0) 2023.09.23
[Redux - 2] Redux의 구조  (0) 2023.09.23