SEB 섹션2. 20일차 TIL - React 상태관리 with Redux
FLUX Architecture
FLUX 구조는 규모가 있는 애플리케이션에서 상태 관리(state management)를 하기 위한 하나의 패턴이다. 이 구조는 리덕스에도 반영된 구조이며, 기존에 존재하던 MCV 구조의 단점들을 보완하기 위하여 생겨난 구조 패턴이다. FLUX 구조에서는 일방향으로 데이터가 흐른다. (unidirectional data flow) 일방향 데이터 흐름을 제외하고 해당 구조에서는 4가지의 핵심 요소가 존재한다.
: Action, Dispatcher, Store, View
View
View는 현대적인 앱에서 컴포넌트 트리를 의미한다. 예를 들어서 리액트에서 View는 사용자가 View와 상호작용 하는데 이는 궁극적으로 Action을 발동시키기(Trigger) 위함이다. 예로 버튼을 클릭하는 것
Action
Action은 Store에 있는 state를 업데이트하기 위해 필요한 정보를 캡슐화한다.(enchapsulate)
Action은 Dispatcher로 전달된다. 이렇게 전달되는 경우의 대부분은 View에서 발생되는 유저의 상호작용으로 인하여 발생된다. Action creator는 보조 메소드로 (helper methods), 하나의 library에 보관된다. 이렇게 Action이 모인 library에서는 메소드의 매개변수를 통하여 하나의 Action을 생성하고 그것에 유형을 할당하며(assign it a type) 그리고 그것을 Dispatcher로 전달한다.
Dispatcher
Dispatcher는 Store로 전달되는 Action들의 대리자 역할을 수행(delegate)한다.
모든 Action은 DIspatcher로 전달되며, Dispatcher에서는 callback들을 통하여 Store로 Action의 내용을 전달한다.
Dispatcher는 FLUX 구조에서 모든 데이터 흐름을 관리하는 중심 허브의 역할을 수행한다. Store에 대한 콜백 등록을 하며 Action들을 Store로 전달하는 간단한 매커니즘을 가진다.
Store
Store는 새롭게 바뀐 state를 View에서 갱신할 수 있도록 그것들을 전달한다.
어플리케이션의 상태와 로직(state and logic)을 보관하며 그것들을 관리한다.
Dispatcher를 통하여 전달된 Action의 내용은 Store에서 관련된 State를 확인하고 그것을 Action 내용을 바탕으로 갱신시킨다. 그리고 갱신이 완료되면 변동사항이 생긴 data layer를 변경 이벤트(change event)를 View에게로 알린다.
Redux
리덕스는 복잡한 상태 관리를 좀 더 수월하게 관리할 수 있도록 도와주는 라이브러리 중 하나이다. 리액트에서는 일반적으로 로컬 컴포넌트에 귀속되어지는 상태(State)의 지역성에서 벗어나 전역으로 상태를 관리할 수 있게 도와준다.
Redux의 세 가지 원칙
1. Single source of truth
데이터를 저장하는 스토어라는 하나 뿐인 공간이 있다는 이야기다.
2. state is read-only
리덕스에서는 액션이라는 객체를 통해서만 스테이트를 변경할 수 있다.
3. Changes are made with pure functions
리듀서와 연결되는 개념
리덕스의 기본개념 : 스토어
스토어
: state가 관리되는 오직 하나의 공간
Redux의 기본개념 : 액션
Action : 자바스크립트 객체
객체 안에 타입을 비록한 다양한 데이터가 담긴다.
스토어에게 애플리케이션의 데이터를 운반해주는 역할을 한다.
type을 꼭 지정해줘야함
Redux의 기본 개념 : Reducer
현재 상태와 Action을 이용해 다음 상태를 만들어 냄
Action 객체는 Dispatch에게 전달되고, Dispatch는 Reducer를 호출해서 새로운 state생성
Redux의 장점
1. 상태를 예측 가능하게 만들어 준다.
2. 유지보수
3. 디버깅에 유리하다 (action과 state log 기록 시)
4. 테스트를 붙이기 쉽다.