1. 리덕스란?
크로스 컴포넌트 또는 앱 와이드 상태를 위한 상태 관리 시스템이다.
상태, 즉 우리 애플리케이션을 변경하고 화면에 표시하는 데이터를 관리하도록 도와준다. useState 훅과 함께 또는 useReducer로 변화하는 데이터를 관리 할 수 있게 해준다.
예를 들어 사용자가 버튼을 클릭하면 그 데이터가 변경되고 UI가 업데이트된다.
우리는 useState 같은 리액트의 상태 관리 훅을 사용해서 어떤 데이터가 변경되었다고 리액트에 알리고 그러면 리액트는 UI를 업데이트한다. 이게 바로 상태다.
1-1. 상태의 구분
1) Local State(로컬상태)
로컬 상태는 데이터가 변경되어서 하나의 컴포넌트에 속하는 UI에 영향을 미치는 상태다. useState를 사용해 컴포넌트 안에서 로컬 상태를 관리한다.
예) input 키 입력, 토글버튼 값 등을 state에 저장
만약 좀 더 복잡하다면 useReducer를 사용할 수 있다.
2) Cross-component State
다수의 컴포넌트가 협력해 영향을 미치는 상태다.
예) 모달 overlay
이 때 useState나 useReducer를 이용해서 그걸 구현할 수 있다. prop을 넣어주고 prop chain을 구축한다=(prop드릴링)
그러면 그런 다양한 컴포넌트들이 협력하고 상태를 함께 관리할 수 있다.
3) App-Wide State
애플리케이션의 모든 컴포넌트에 영향을 미치는 상태다.
예) 사용자 인증
예를 하나 들자면 사용자 인증이 있겠죠
제가 로그인하면 우리는 탐색 바를 변경해야 할 수도 있습니다
새로운 옵션을 표시하기 때문이죠
크로스 컴포넌트와 앱 와이드 상태에서 데이터를 넣고 전체 props 함수를 업데이트하는 건 번거로울 수 있다. 그래서 리액트 내장기능인 context를 사용해 쉽게 관리할 수 있게 해준다.
그렇다면 리액트 context가 있는데 굳이 리덕스가 필요한 이유가 뭘까?
2. 리덕스 vs 리액트 context
리덕스는 크스 컴포넌트 상태 또는
앱 와이드 상태를 위한 상태 관리 시스템이이다.
리액트 컨텍스트를 쓰면 또한 prop 체인이나
prop 드릴링을 하지 않을 수 있고, 대신에 우리는
Context와 ContextProvider 컴포넌트를 중심으로
상태를 관리할 수 있다.
2-1. context의 잠재적 단점
전반적인 앱 와이드 상태에 리덕스를 사용하고 중요한 일부 다중 컴포넌트 상태에는 여전히 컨텍스트를 혼합하여 사용가능하나 보통 하나를 사용한다.
1)상태관리의 복잡한 설정
대형 애플리케이션 구축시 많은 context와 다수의 컴포넌트나 전체 앱에 영향을 미치는 많은 다양한 상태가 있다. 그리고 그런 상태를 관리하기 위한 ContextProvider 컴포넌트가 아주 많이 있게 된다.
그 결과 아주 심하게 중첩된 JSX코드가 나오게 된다.
만약, 단 하나의 context와 provider로 관리를 한다면?
큰 ContextProdiver 컴포넌트 하나가 다양한 많은 것들을 관리하기 때문에 그것 자체를 유지하고 관리하기가 어려워질 수 있다. 큰 context 하나가 인증, 테마, 사용자 입력 모달 표시 여부뿐만 아니라 다른 많은 것들도 관리해야 한다.
2) 성능 저하 이슈
상태가 빈번히 변경되는 경우 좋지 않다.
컨텍스트는 유동적인 상태 확산을 대체할 수 없다.
리덕스는 유동적인 상태 관리 라이브러리다.
리덕스의 작동 방식
Store
애플리케이션에 있는 하나의 중앙 데이터(=상태) 저장소
전체 애플리케이션의 모든 상태를 저장하며 애플리케이션에 딱 한개만 있다.
저장소를 직접 관리할 필요는 없다.
예를 들어 사용자의 인증 상태가 변경되는 등 store에 있는 데이터가 변경되면 컴포넌트에서 그걸 인지해서
그에 맞춰 대응하고 UI를 업데이트하길 원한다.
이를 위해 store에 대한 subscribe를 설정한다.
컴포넌트가 store를 구독하고 데이터가 변경될때마다 store가 컴포넌트에 알려주게된다. 그러면 컴포넌트는 필요한 데이터를 받아 사용할 수 있다.
그럼 저장된 데이터를 어떻게 변경할까?
아주 중요한 규칙이 있다.
컴포넌트는 저장소에 있는 데이터를 직접 조작하지 않습니다
데이터는 절대로 반대 방향으로 흐르지 않는다.
그 대신에 리듀서라는 개념을 사용한다.
저장소의 데이터를 변경하는 함수인 리듀서 함수를 설정한다. useReducer 훅과는 다른 개념이다.
리듀서 함수는 입력을 변환해서 새로운 결과를 반환한다.
useReducer는 훅이 사용하고 이 리듀서 함수는 리덕스도 사용한다.
예를 들면 어떤 컴포넌트의 버튼을 클릭하면 그게 데이터 변경을 트리거할 것이다.
액션
컴포넌트가 액션을 트리거(발송)한다. 이 액션은 자바스크립트 객체로 리듀서가 수행해야 할 작업을 설명하낟.
리듀서
리듀서는 작업에 대한 설명을 읽고, 액션에 원하는걸 하게 되며 입력값에 대한 새로운 상태를 반환하여 실제 그 중앙 데이터 저장소의 기존 상태를 업데이트하게 된다.
그리고데이터 저장소의 상태가 업데이트되면 subscribe 중인 컴포넌트가 상태가 변경되었다는 알림을 받게 되고 UI를 업데이트 할 수 있게 된다.
