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