[React] Flux, Redux 패턴

 

Flux 패턴 순서: View -> Action -> Dispatcher -> Store -> View

 

View: 상태가 변화 된 것을 랜더링하여 확인한 것

Action: 클릭등과 같은 이벤트들을 의미

Dispatcher: Action을 수행하기 위한 함수를 실행하는 부분

Store: 이전 값과 상태 변화 값을 확인 후 State의 변화를 저장하는 곳

 

Flux 패턴

 

Redux 패턴 순서: Component -> Action -> Reducer -> Store -> State -> Component

• Flux 패턴과 다르게 하나의 App에서 하나의 Store만 존재한다.
• Flux 패턴을 좀더 쉽게 사용할수 있는 라이브러리

Component (UI)

• Action이 발생한다.
• 나중에 변경된 State를 반영하기 위하여 Store가 구독을 해놓는다.

Action

• 변화가 필요할 때 발생시키는 신호
• Dispatch()로 감싸서 reducer로 전달된다.
• Action에는 Type을 필수로 담고 필요한 데이터가 있으면 같이 담긴다.
• 이후 reducer에 전달되기 전에 Store에서 state를 가져와 Action과 함께 reducer로 전달된다.

Reducer

• 액션의 타입에 따라 상태를 업데이트하는 순수 함수
• 이전 상태와 액션을 받아 새로운 상태를 반환한다.

Store

• 애플리케이션의 상태를 저장하는 곳
• createStore() 함수를 사용해 생성된다.
• 상태를 읽고 업데이트 할 수 있는 메소드를 제공한다.

State

• 컴포넌트에서 관리되는 상태
• 상태가 변경되면 컴포넌트가 다시 랜더링된다.

Redux 패턴

Redux 사용 이유:

1. 컴포넌트의 개수가 늘어나고 구조가 복잡해지면, 관리해야하는 state가 늘어나고, 이를 props로 계속 전달하다보면
   가독성이 떨어지고 전달을 목적으로 하는 props의 개수가 늘어나기 때문에 비효율적이다.
2. 하지만 컴포넌트의 구조가 단순하고 소규모 프로젝트일 경우 굳이 Redux 라이브러리를 사용할 필요가 없으며
   무분별하게 사용하면 오히려 코드가 복잡해질수 있다.
3. 여러 곳에서 공용으로 사용되는 state 또는 초기화되지 않고 계속 유지되어야 하는 state일 경우에만 사용하는 것이 
   바람직하다.

Redux 원칙

1. 1개의 App에 1개의 Store만 존재해야 한다.
   여러개의 Store가 있을 경우 코드를 찾아서 수정하는 것이 매우 어려워진다.
   따라서 여러개의 reducer를 조합하여 하나의 Store로 생성해야 한다.
   조합할 때에는 combineReducer()를 사용하여 하나의 Store로 묶어준다.
2. state는 불변성을 가져야 한다.
   기존의 state는 수정하지 않고 새로운 객체를 넣어주어야 변경이 감지된다.
   또한 Life Cycle에서 이전에 state 값을 기억시키기 위해서도 새로운 객체를 전달하여 불변성을 유지해야 한다.
   불변성을 가져야하는 이유는 좋은 성능을 위해서 깊은 탐색이 아닌 얕은 탐색으로 검사하기 때문이다.
3. reducer는 반드시 순수 함수로 만들어야 한다.
   입력값과 출력값이 똑같아야한다.
   state는 변경하지 말고 action을 통해 변경한 새로운 state 객체를 만든 뒤 리턴해야 한다.
   date, random(), fetch() 등과 같이 실행할 때마다 다른 결과 값이 나타나는 작업은 reducer 함수 밖에서 처리 해야한다.
   이러한 작업을 Middleware에서 작업하게 된다.