React in Action #3
3.2.3 PropTypes와 기본 속성
PropTyps API는 컴포넌트가 어떤 종류의 속성을 필요로 하는지를 명시하는 타입 확인 기능을 제공한다. 이전 버전에서는 리액트 라이브러리에 포함해서 제공했지만, 현재 버전에서는 prop-types 패키지를 통해 별개의 라이브러리로 제공한다.
3.2.4 상태가 없는 함수형 컴포넌트
이런 패턴을 사용할 경우 상태는 컴포넌트가 개별적으로 관리하는 것이 아니라 어느 한 지점에서 중앙집중적으로 관리한다. 기본적으로 함수이며 명명된 함수 또는 변수에 대입한 익명 함수 표현식을 이용해 생성한다.
10. 리덕스 애플리케이션 아키텍처
10.1 플럭스 애플리케이션 아키텍처
플럭스와 리덕스는 MVC의 개념을 채택하고 있지는 않으나, 확장할 수 있고 합리적이며 효율적인 애플리케이션 아키텍처 구현을 돕기 위한 목적으로 탄생했다.
플럭스는 애플리케이션을 모델, 뷰, 컨트롤러가 아닌 몇 가지 다른 부분으로 구분한다.
- 스토어 : 애플리케이션의 상태와 로직을 구현하는 부분으로 전통적인 MVC 아키텍처의 모델과 유사하지만 하나의 데이터베이스 레코드를 표현하는 것이 아니라 여러 객체의 상태를 관리한다.
- 액션 : 플럭스 앱은 상태를 직접 갱신하는 것이 아니라 상태를 변경하는 액션을 생성하여 상태를 수정한다.
- 뷰 : 리액트로 구현되는 사용자 인터페이스를 의미하지만, 플럭스는 리액트를 반드시 필요로 하지는 않는다.
- 디스패처 : 액션과 스토어의 갱신 사이에서 둘을 조율한다.
다시 말해, 뷰에서 사용자의 행위에 의하여 액션이 생성되고 디스패처가 유입되는 액션을 처리하여 액션이 상태를 갱신하기 위해 적절한 스토어에 전달되는 것.
단방향 흐름
기존의 방식보다 변경을 추적하기 쉬우며, 자율적이고 강력한 방법으로 UI를 개발할 수 있다는 것에서 리액트와 어느 정도 공통점이 있다.
10.1.1 리덕스
플럭스를 구현한 라이브러리 중 가장 널리 사용되는 것 -> 플럭스의 개념을 개선한 방식
[플럭스와 리덕스 패러다임의 중요한 차이점]
- 리덕스는 단일 스토어를 사용한다 : 애플리케이션의 상태를 하나의 전역 스토어를 두어 관리한다.
- 리덕스는 리듀서를 활용한다 : 한 번에 상태의 어느 한 곳을 오직 한 곳(전역 스토어)에서 변경한다.
- 리덕스는 미들웨어를 활용한다 : 액션과 데이터가 단방향으로 흐름 -> 앱에 미들웨어를 추가해서 데이터의 갱신에 대응할 임의의 동작을 주입할 수 있다.
- 리덕스 액션은 스토어와는 분리되어 있다 : 액션을 생성한 모듈은 스토어에 아무것도 전달하지 않지만 중앙의 디스패처가 사용하는 액션 객체를 리턴한다.