https://reactjs.org/blog/2013/06/05/why-react.html 의 일부를 번역하여 가져온 글이다.
리액트는 “구성할 수 있는 (Composable)” 유저 인터페이스를 만들기 위한 라이브러리이다. 지속적으로 변화하는 데이터를 표현하는 재사용 가능한 UI 컴포넌트를 만들도록 도와준다.
리액트는 템플릿을 사용하지 않는다
리액트는 UI를 컴포넌트로 나눔으로써 UI를 만들어낸다. 즉 리액트는 템플릿 대신 프로그래밍 언어를 사용하여 뷰를 렌더링한다.
이것은 템플릿을 사용하는 것보다 몇 가지 장점이 있는데:
- Javascript는 추상화 능력을 갖춘 유연하고 강력한 프로그래밍 언어이고, 이것은 큰 어플리케이션에서 더 중요하다
- 마크업과 뷰 로직을 통합시킴으로써, 확장과 유지보수가 용이해진다
- 마크업과 내용물을 자바스크립트로 가져감으로써 수동식의 string concatenation이 사라지고, 이것은 XSS 취약을 완화시켜준다.
단순한 반응형 업데이트
리액트는 데이터가 변할 때 빛을 발한다.
전통적인 자바스크립트 어플리케이션에서는 어떤 데이터가 바뀌었는지 관찰하고 DOM을 최신으로 유지하기 위해 명령형 방식으로 DOM을 변화시켜야 했다.
리액트는 다른 접근방식을 사용한다.
컴포넌트가 처음 초기화될 때 render 함수가 호출되고, 간소화된 표현의 view가 만들어진다. 그 view로부터 마크업 문자열이 만들어지고 document에 삽입된다.
데이터가 바뀌면, render 은 다시 호출되고 이전의 render 의 리턴값과 현재 상태를 비교하여 DOM에 적용되어야 할 최소한의 변화값을 만들어낸다.
*render 에서 리턴되는 데이터는 string도, DOM node도 아니다. 이것은 DOM이 어떻게 생겨야 하는지를 보여주는 경량화된 묘사이다.*
이러한 작업은 Reconciliation (조화)라고 불린다.