리액트 핵심 가치와 가상 DOM, Flux 아키텍처 정리
선언적이라는 말이 가리키는 것
리액트가 선언적(declarative)이라는 말이 무슨 뜻인지 매번 헷갈렸다. 선언적 코드는 "무엇을 보여주고 싶은지"만 적는 방식이고, 명령형(imperative) 코드는 "어떻게 그릴지"를 일일이 적는 방식이다. 리액트에서는 화면이 어떤 모습이어야 하는지를 컴포넌트로 표현하면, 실제 DOM을 언제 어떻게 바꿀지는 리액트가 알아서 처리한다.
그래서 DOM을 직접 만지지 않게 된다. JavaScript 상태가 UI의 단일 출처가 되고, 같은 상태에서 같은 화면이 나오는 흐름이 만들어진다. 컴포넌트 모델로 구조를 쪼개니 디버깅이 수월해지고, 재사용성과 효율도 따라온다.
여기에 더해 불변성(immutability)을 강제한다. 상태를 직접 수정하지 않고, 업데이트할 때마다 새로운 스냅샷과 새로운 메모리 참조를 만든다. 함수형 프로그래밍 원칙에 맞고, UI 업데이트도 효율적이며, 버그가 생길 여지를 줄여준다.
가상 DOM은 진짜 DOM의 사본을 메모리에 들고 있는 것
가상 DOM은 UI를 표현한 가벼운 객체 트리를 메모리에 들고 있는 프로그래밍 개념이다. 리액트는 상태가 바뀔 때마다 이 가상 트리를 새로 만들고, ReactDOM 같은 렌더러가 이 가상 트리를 실제 DOM과 동기화한다.
덕분에 개발자가 실제 DOM API를 직접 호출하지 않고도 UI를 바꿀 수 있다. 코드에서 보는 것은 컴포넌트와 상태이고, 실제 DOM 조작은 리액트 내부에서 일어난다.
Flux는 데이터가 한 방향으로만 흐르도록 만든 약속
Flux는 Facebook이 제안한 단방향 데이터 흐름 아키텍처다. 리액트와 같이 쓰이며, 상태가 어디서 변하고 어디로 흘러가는지 흐름을 단순하게 만들어주는 패턴이다.
구성요소는 네 가지다.
| 구성요소 | 역할 |
|---|---|
| 액션(Action) | 새 데이터와 액션 종류를 담은 객체. 디스패처로 전달된다 |
| 디스패처(Dispatcher) | 액션을 받아 등록된 스토어 콜백들로 전달한다. 콜백 관리도 디스패처가 한다 |
| 스토어(Store) | 상태와 로직을 담고 있다. 여러 객체의 상태를 관리하고, 상태가 바뀌면 변경 이벤트를 발생시킨다 |
| 뷰(View) | 리액트 컴포넌트. 스토어의 변경 이벤트를 듣고, 의존하는 데이터가 바뀌면 다시 그린다. 새로운 액션을 만들어 흐름을 다시 시작할 수도 있다 |
흐름을 그림으로 옮기면 이렇다.
뷰에서 새 액션을 만들면 다시 디스패처로 들어간다. 데이터가 한 방향으로만 도는 구조라 흐름이 꼬일 일이 적다.
이 구조가 주는 것
상태값의 출처가 한 곳으로 모인다. 중앙 집중식 상태 관리가 가능해진다. 액션·디스패처·스토어·뷰가 각자 역할이 분리되어 있어서 테스트를 붙이기 쉽고, 어디서 무엇을 보는지 파악도 쉬워진다. 유지 보수가 수월해지는 건 그 결과다.