공식문서 가이드
- 내용이 아직 이해가 잘 안간다.
- 추후에 천천히 다시 보자.
https://react-redux.js.org/tutorials/quick-start
참고할만한 튜토리얼 블로그
https://www.robinwieruch.de/react-redux-tutorial#redux-actions
0. 목차
- How to learn X with React Redux?
- What is Redux?
- Basics in Redux without React
- Action(s)
- Reducer(s)
- Redux Store
- Redux without React: Example
- The React Redux Project
- Basic React Components
- Simple Styling for React Components
- Feature: Archive a Story
- Redux Store + Reducers
- Redux: How to combine Reducers
- Redux: Actions
- Redux: Selectors
- Redux: Re-render React
- Redux Middleware
- Redux: Action Creators
- Connect React with Redux
- Redux: Lift Connection
- Redux and Data Fetching
- Separation of API logic
- Redux: Error Handling
- Tests in Redux
1. How to learn X with React Redux?
2. What is Redux?
Redux 는 당신의 어플리케이션에서 정교한 state(상태) 관리를 도와주는 라이브러리입니다.
자바스크립트 초창기에는 jQuery 라이브러리를 사용했었습니다. 하지만 점점 코드의 크기가 증가하면서 새로운 솔루션이 필요하게 되었습니다.
Angular, Ember and Backbone 과 같은 1 세대 프레임워크, 라이브러리가 등장하면서 SPA(Single page applications) 이 유명해졌습니다.
하지만 1세대 프레임워크, 라이브러리도 상태 관리에 대해서는 어려움이 많았습니다.
그 사이 페이스북에서 2세대 SPA 솔루션인 React가 출시되었습니다.
React 의 단방향 데이터 흐름 원칙( the principle of the unidirectional data flow)이 유명해졌고, 상태 관리가 훨씬 더 나아졌습니다. 하지만 어플리케이션이 규모가 커지면 커질수록 상태 관리가 어려워졌고, 이 때 페이스북에서 Flux architecture 도입하였습니다.
Flux 아기텍처에서 Redux 의 기본 개념인 Action, Dispatcher, Store 및 View 가 처음 등장하였고 Flux 아기텍처 에서 구현한 여러 솔루션을 능가하는 후속 라이브러리인 Redux가 출시되었습니다.
3. Basics in Redux without React
Redux 는 자바스크립트 어플리케이션에서 예측 가능한 상태(State)관리를 해주는 컨테이너입니다.(Redux is a predictable state container for JavaScript apps.) Redux 는 단독 실행이 가능하며 자바스크립트 어플리케이션의 라이브러리인 React 나 Angular 와 연결하여 사용할 수도 있습니다.
Flux 아키텍처의 다음과 같은 기본 구성요소를 기본으로 수행합니다.
View -> Action -> Reducer(s) -> Store -> View기존 React는 View에서 State 를 포함하여 관리하였습니다.
Redux에서 State 는 더 이상 View에 포함되어 있지 않고 단순히 연결만 되어있습니다. 연결되어 있다는 의미는 단방향 데이터 흐름의 원칙 때문입니다.
View 에서 State 를 변경시키는 트리거가 동작이 되면 State 를 변경시킬 Action 객체가 생성되고 Reducer 통하여 Store에 새로운 State 를 생성합니다. View 는 Store 로 부터 단순히 새로운 State 를 전달 받을 뿐입니다.
