[React] 리액트 개념 정리 #6

12장

 

플럭스 아키텍처

대규모 애플리케이션에서 일관된 데이터 관리를 쉽게 하기 위해 만들어진 단방향 데이터 처리 과정을 가지는 아키텍처

 

상태를 필요로 하는 컴포넌트에 스토어의 상태를 연결할 수 있으며, 부모 컴포넌트에서 자식 컴포넌트로 반복적이고 계층적으로 속성을 전달하지 않아도 됨

 

플럭스 아키텍처는 단일 디스패처를 사용하여 

모든 데이터 흐름은 단일 디스패처를 거쳐 가므로 이곳에서만 모니터링과 로깅을 하면 모든 액션의 흐름을 볼 수 있으며, 액션에 의해 상태가 어떻게 변경되어가는지 쉽게 추적할 수 있음.

 

 

 

리덕스

리덕스는 자바스크립트 애플리케이션을 위한 예측 가능한 상태 관리 컨테이너

UI 상태와 데이터 상태를 관리하기 위한 효과적인 도구이다.

 

플럭스 아키텍처를 발전시켜 복잡성을 줄이도록 설계됨

플럭스의 기능에 핫 리로딩과 시간 여행 디버깅 기능을 제공함

 

기존 플럭스 아키텍처는 스토어가 상태와 상태 변경 로직을 포함하고 있음.

따라서 개발 중 상태 변경 로직을 변경하면 개발 중에 상태가 초기화 되어 버림.

 

특징 1

반면, 리덕스의 스토어는 상태만을 가지고, 상태 변경의 기능을 리듀서 라는 요소로 분리함.

이 결과 상태 변경 로직이 개발 중에 변경되더라도 상태를 유지시킬 수 있음. ==> 핫 리로딩

 

특징 2

리듀서를 이용해 상태를 변경할 때 기존 상태 객체를 변경하지 않고 새로운 상태 객체를 생성한다.

불변성을 가짐. (플럭스는 ㄴㄴ)

 

리덕스의 불변성을 가지는 상태 변경은 시간 흐름에 따라 상태의 이력을 남김

상태의 변경 추적이 가능함.

개발 중 어느 시점의 상태로 돌아가 다시 기능을 확인할 수 있어서 디버깅에 유용함. ==> 시간 여행 디버깅

 

다중 리듀서

애플리케이션 상태가 복잡해지면 상태 뿐만 아니라 상태 변경 기능인 리듀서가 지나치게 많아질 것임.

이것을 하나의 모듈로 처리할 수 없음.

이런 이유로 리덕스는 상태는 하나지면 여러 개의 리듀서로 분리할 수 있음.

 

리덕스 미들웨어

액션이 스토어로 전달(dispatch)된 후 리듀서에 도달하기 전과 상태 변경이 완료된 후에 수행할 중앙집중화된 작업을 지정할 수 있는 함수

리덕스 미들웨어는 스토어 내부에 등록한다.