Redux에 대해 배웠다. Redux는 React와 이름이 비슷해, React 애플리케이션에서만 작동할 수 있는 라이브러리라고 생각했는데, 딱히 그건 아니고 자바스크립트 앱을 위한 상태 관리 라이브러리였다. React가 등장하고, 그 이후 Flux 패턴이 등장, 이후에 Vue.js나 Angular.js와 같은 웹 애플리케이션 프레임워크에서도 해당 개념을 도입해 사용할 수 있는 것 같다.
(혹시 틀린 정보라면 이후에 삭제할 것이다. 일단 React 애플리케이션에서만 사용 가능한 라이브러리는 아니다.)
Redux에 대해 사용하기 이전에, Flux 패턴에 대한 이해가 필요하다고 느껴 정리해보려고 한다.
1. MVC 패턴
Flux 패턴에 대해 배우기 이전에, MVC 패턴에 대해 알아야 한다.
MVC는 Model - View - Controller의 약어이다.
Model은 애플리케이션이 포함하는 데이터를 정의한다. 데이터 업데이트 시 뷰에 이를 알리고(화면의 변경이 필요할 때), 가끔은 컨트롤러에 알리기도 한다. (화면의 변경을 위해 다른 로직이 필요할 때)
View는 사용자에게 보여지는 UI이다. 표시할 데이터를 Model로부터 받지만, View는 그 데이터를 저장하지 않고 보여주는 역할만을 맡는다.
Controller는 Model과 View를 연결해주는 역할이며, 사용자의 입력이나 수정 이벤트에 대해 로직을 처리하여 Model로 전달되는 데이터를 통제하고, Model에서 일어난 변경을 View에 전송하여 업데이트한다.
작동되는 순서는,
1. 사용자 입력을 Controller가 감지하고 검증한다.
2. Controller는 Action(입력 이벤트)을 확인하고 비즈니스 로직을 수행한다.
3. Controller가 로직에 대한 결과를 어떤 View에 보여줄 지 결정한다.
4. View는 Model의 값을 (Controller를 통해) 화면에 보여준다.
기존의 MVC 패턴은 다음과 같이 View와 Model 사이의 양방향 상호작용이 없지만, CSR(클라이언트 사이드 렌더링)에서는 자바스크립트 프레임워크에서 View와 Model이 직접적으로 상호작용이 가능한 데이터 바인딩을 지원하기 때문에, 애플리케이션의 규모가 커지면 어디서 어떤 데이터가 어떻게 변경되었는지 찾기 힘들어져 디버깅이 힘들어진다.
그렇기때문에 페이스북에선 Flux 패턴을 제시했고, 데이터의 흐름을 조금 더 예측가능하도록 만들고자 했다.
2. Flux 패턴
Flux 패턴은 단방향 데이터 흐름을 따르기때문에, 데이터의 흐름이 양방향으로 흐를 때보단 예측이 쉽다.
Flux 패턴에서 데이터가 흐르는 순서는,
1. View에서 새로운 Action을 생성해 시스템에 전파한다.
2. 해당 Action은 Action creator 메서드를 Dispatcher에게 제공한다.
3. Dispatcher는 Store를 등록하기 위한 콜백을 실행하고 Action을 모든 Store에 전달한다.
4. 관리하고 있는 상태 중 어떤 Action과 관계가 있다고 생각하면 Store는 Action에 따른 변경 이벤트를 Controller-Views에게 알려준다.
5. 데이터 계층의 변화가 발생한다.
6. Controller-Views는 이벤트를 듣고 잇다가 이벤트 핸들러가 있는 Store에서 데이터를 다시 가져온다.
7. Controller-View는 스스로 상태 변경 메소드를 호출하고, 컴포넌트 트리에 속한 모든 자식 노드를 렌더링한다.
3. Flux 패턴 용어
Action
- 상태의 변경을 나타낸다.
- Type과 Payload를 포함한 자바스크립트 객체 그 자체이다. (그 외의 정보도 들어갈 수 있다.)
Action Creator
- 라이브러리에서 제공하는 헬퍼 메소드로, 메소드 파라미터에서 Action을 생성한다.
- Action의 Type을 설정한다.
- Action을 Dispatcher에 제공한다. (모든 Action은 Store가 Dispatcher에 등록한 콜백을 통해 모든 Store에 전송한다.)
Store
- 어플리케이션의 상태와 로직을 포함한다.
- 어플리케이션 내의 개별적인 도메인에서 어플리케이션의 상태를 관리한다.
- 자기 자신을 Dispatcher에 등록하고 콜백을 제공한다.
- 콜백의 내부에서는 Switch문을 사용한 Action Type을 활용해 Action을 해석하고, Store 내부 메소드에 적절하게 연결될 수 있는 훅을 제공한다.
Dispatcher
- Store 간의 의존성 관리가 가능하다.
- 모든 데이터의 흐름을 관리한다.
- Store 사이에 의존성이 있는 경우에서도 순서에 맞게 콜백 함수를 순차적으로 처리할 수 있도록 한다.
- Dispatcher를 통해서만 Store의 데이터를 조작할 수 있다.
#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript
