선언형
React는 대화형 UI를 만들 때의 어려움을 줄입니다. 어플리케이션의 각 상태에 대한 간단한 뷰를 설계하면, React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효과적으로 갱신하고 렌더링합니다.
선언형 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만듭니다.
컴포넌트 기반
캡슐화된 컴포넌트들을 만들어 스스로의 상태를 관리하도록 만드세요. 그리고 이를 조합해 복잡한 UI를 만들어보세요.
컴포넌트 로직은 템플릿 대신 JavaScript로 작성되므로, 풍부한 데이터를 손쉽게 앱에 전달할 수 있고, 또 DOM 바깥에서 상태를 관리할 수 있습니다.
한번 배우고 어디서나 작성한다
우리는 기술적인 사항의 다른 부분에 대해 별다른 가정을 두지 않았습니다. 따라서 기존 코드를 다시 작성하지 않고도 React를 이용해 새로운 기능을 개발할 수 있습니다.
React를 가지고 Node를 사용해 서버측 렌더링을 수행하거나, React Native를 통해 모바일앱을 만들 수도 있습니다.
단순한 컴포넌트
React 컴포넌트에서는 입력된 데이터를 가지고 화면에 무엇을 표시할 것인지 반환하기 위해 render() 메서드를 사용합니다.
이 예제는 XML과 비슷한 JSX라는 문법을 사용하고 있습니다. render() 안에서 this.props를 통해 컴포넌트로 전달된 입력 데이터에 접근할 수 있습니다.
React를 사용하기 위해 반드시 JSX를 사용해야 하는 것은 아닙니다. Babel REPL을 사용해서 JSX 코드를 컴파일하고, 그 결과로 생성된 JavaScript 코드 원본을 확인해보세요.
상태를 가지는 컴포넌트 (Stateful component)
this.props 를 통해 입력된 데이터를 가져오는 것 외에도, 컴포넌트는 내부 상태 데이터를 관리할 수 있습니다. (this.state 를 통해 접근) 컴포넌트의 상태 데이터가 바뀌면, render()가 다시 호출되고 그로 인해 마크업이 갱신됩니다.
어플리케이션
props 와 state 를 사용하여 간단한 Todo 어플리케이션을 만들 수 있습니다. 이 예제에서는 state 를 사용하여 사용자가 입력한 텍스트뿐만 아니라 아이템의 현재 리스트를 저장합니다. 이벤트 핸들러는 인라인으로 렌더링되는 것처럼 보이지만, 사실 이벤트 위임(event delegation)을 통해 관리됩니다.
외부 플러그인을 사용한 컴포넌트
React는 유연하며 다른 라이브러리나 프레임워크에 접근할 수 있게하는 방법을 제공합니다. 이 예제에서는 외부 마크다운 라이브러리인 remarkable 을 사용하여 <textarea> 의 값을 실시간으로 변환합니다.