React - redux
Redux란?
크로스 컴포넌트 또는 앱 와이드 상태를 위한 생태 관리 시스템이다.
먼저, 상태(state)는 세 가지로 구분된다.
- 로컬 상태
- 데이터가 변경되어서 하나의 컴포넌트에 속하는 UI에 영향을 미치는 상태
- 예를 들어 특정 UI를 감추거나 보여주는 토글
- 크로스 컴포넌트 상태
- 다수의 컴포넌트에 영향을 미치는 상태
- prop 드릴링 발생
- 앱 와이드 상태
- 애플리케이션의 모든 컴포넌트에 영향을 미치는 상태
- 예를 들어 사용자 인증
Why Redux?
리액트 컨텍스트 또한 상태 관리 시스템인데 왜 리덕스가 필요할까?
리액트 컨텍스트는 잠재적인 단점이 몇개 있다.
- 많은 컴포넌트와 내용이 있는 애플리케이션이라면 설정과 상태관리가 복잡해질 수 있다.
- 심하게 중첩되는 JSX코드 & 다양하고 많은 ContextProvider 또는 유지하기 어려운 거대한 하나의 ContextProvider
- 데이터가 자주 변경되는 경우 성능적으로 적합하지 않다.
Redux의 작동 방식
Redux는 애플리케이션에 있는 하나의 중앙 데이터 저장소이다.
여기서 데이터는 상태를 가르킨다.
애플리케이션은 한 개의 저장소만 갖게되며 그 저장소에 전체 애플리케이션의 모든 상태를 저장한다.
그렇다면 관리가 어려울 것 같지만 Redux는 다행히 그 저장소 전체를 항상 직접 관리할 필요가 없다.
구독(Subscription)
컴포넌트는 중앙 저장소에 있는 데이터(상태)의 변화를 감지하여 그에 맞는 대응을 하기위해 구독(Subscription) 을 설정한다.
컴포넌트가 저장소를 구독하면 데이터가 변경될 때마다 컴포넌트에게 알려주게 된다.
Reducer function
컴포넌트가 구독을 통해 받은 데이터는 변경이 필요하기도하다.
저장된 데이터를 어떻게 변경할까? 여기엔 아주 중요한 규칙이 있다.
컴포넌트는 절대로 저장된 데이터를 직접 조작하지 않는다.
그래서 구독을 하는 것이고 직접적은 흐름으로 봤을때 데이터는 절대로 반대 방향으로 흐르지 않는다.
그 대신 리듀서(Reducer) 라는 개념을 이용한다.
이 리듀서 함수를 설정하고 이 함수는 저장소 데이터의 변경, 즉 업데이트를 담당한다.
Action
구독과 Reducer가 있다. 이제 컴포넌트와 그 Reducer 함수를 어떻게 연결할까?
액션(Action) 이라는 개념이 있으며 컴포넌트가 액션을 발송한다.
예를 들면 어떤 컴포넌트 버튼이 있고 클릭 시 상태를 변경하는 함수를 실행하듯 컴포넌트가 어떤 액션을 트리거한다 말할 수도 있다.
액션은 단순한 자바스크립트 객체이며 Reducer가 수행해야 할 작업을 설명하게 된다.
정리
- 컴포넌트가 Action을 발송(Action에는 수행해야 할 작업이 설명되어 있지만 그걸 직접하진 않음)
- Reducer가 Action이 원하는 작업을 수행하고 새로운 상태를 뱉어낸다. 새로운 상태는 저장소의 기존 상태를 대체하게 된다.
- 데이터 저장소의 상태가 업데이트되면 구독 중인 컴포넌트가 알림을 받게 되고 컴포넌트는 UI를 업데이트할 수 있게 된다.
