대부분의 튜토리얼들은 React를 UI라이브러리로 소개한다. React는 UI 라이브러리이다. 홈페이지에도 그대로 적혀있다.
많은 사람들이 이글에서 다루는 대부분의 주제들에 대해 생각하지 않고도 몇 년 동안 React를 잘 써왔다. 이 글은 명백히 프로그래머의 중심적인 관점으로 React를 바라본 것이고 흔히 말하는 디자이너 중심적인 관점의 글은 아니다. 하지만 저는 두 관점 모두 가질 수 있다고 생각한다.
어떤 프로그램은 숫자를 만든다. 어떤 프로그램은 시를 만든다. 여러 언어와 각각 런타임들은 특정 용도에 최적화되어있고, React도 예외는 아니다.
React 는 보통 시간이 지남에 따라 변화할 수 있는 트리를 출력한다. DOM 트리, iOS계층구조, PDF 요소들의 트리, 심지어 JSON 객체가 될 수도있다. 그러나 보통 React는 UI를 표현하는데 쓰인다. 이것을 '호스트 트리' 라고 한다. React의 일부가 아니라 DOM이나 iOS와 같이 외부 호스트 환경의 일부이기 때문이다. 호스트 트리는 자체적으로 소유한 명령형 API가 있다. React는 그 최상단 계층이다.
그렇다면 React는 어디에 유용할까? 추상적으로 말하자면 외부 상호작용, 네트워크 응답, 타이머 등 외부 이벤트에 대한 응답으로 복잡한 호스트 트리를 예측할 수 있게 조작하는 프로그램을 작성하는데 유용하다.
특정 조건을 만족할 때 범용적인 도구보다 전문 도구가 유용하다. React는 다음 두 원이 있다.
이 원칙들은 대부분 UI에 적용된다. 그러나 React는 결과에 일정한 '패턴'이 없을 때 적합하지 않다. 예를 들어 React는 Twitter클라이언트를 작성하는 데 도움이 도지만 3D 파이프 스크린 세이버 에는 별로 유용하지 않다.
호스트 트리는 노드로 구성된다. '호스트 객체'라고 부른다.
DOM 환경에서 호스트 객체는 document.createElement('div') 를 호출할 때 얻을 수 있는 객체와 같은 일반적인 DOM 노드 이다. iOS에서 호스트 객체는 자바스크립트에서 네이티브 뷰를 식별하는 값일 수있다.
호스트 객체는 고유한 속성을 가진다 (예를들어 DOM 의 domNode.className 또는 iOS의 view.tintColor) 또한 다른 호스트 객체 자식으로 포함 할 수 있다.
일반적으로 호스트 객체를 조작하는 API 가 있다. 예를들어 DOM 은 appendChild, removeChild, setAttribute 등과 같이 API를 제공한다. React 앱에서는 일반적으로 이런 API를 직접 호출하지 않는다. React가 처리해 준다.
랜더러는 React가 특정 호스트 환경과 통신하고 호스트 객체를 관리한다. ReactDOM, React Native, 심지어 Ink도 React 렌더러 이다. 또 나만의 react렌더러를 만들수도 있다.
React 렌더러는 두 가지 모드가 있다.
대다수의 렌더러는 '변경' 모드를 사용하도록 작성되어있다. 이 모드는 DOM 작동 밧익이다. 노드를 만들고 속성을 설정 한 다음 노드를 나중에 추가하거나 제거할 수있다. 호스트 객체는 완전히 변경할 수 있다.