1.1 React란 무엇인가?

React는 UI(사용자 인터페이스, user interfaces) 컴포넌트 라이브러리다.

React UI 컴포넌트는 다른 템플릿 언어가 아닌 자바스크립트를 이용해서 만든다.

컴포넌트 기반 아키텍처(component-based architecture, CBA)는 일반적으로 일체형 UI에비해 재사용과 유지보수, 확장이 용이하다.

1.2 React가 해결할 수 있는 문제

1.3 React의 장점

1. 단순한 앱 개발: React는 순수 자바스크립트로 만든 컴포넌트 기반 아키텍처다. 선언형 스타일이며, 강력하고 개발자 친화적인 DOM 추상화를 제공한다.

2. 빠른 UI: 가상 DOM 채택과 DOM의 변경 사항을 비교할 때 사용하는 알고리즘 덕분에 헤드리스 브라우저(headless browser)를 사용하지 않고도 테스트를 수행할 수 있다.

3. 코드량 감소: React 커뮤니티와 개발 생태계를 통해 수많은 라이브러리와 컴포넌트를 접할 수 있다.

1.3.1 간결성

• 선언형 스타일 채택: React는 뷰를 자동으로 갱신하는 선언형 스타일을 채택한다.

선언형 스타일은 개발자가 순서대로 무엇을 해야 할지를 작성하는 명령형 스타일과 달리, 실행 결과가 어떻게 되어야 할지를 코드로 작성한다.

• 순수한 자바스크립트를 이용한 컴포넌트 기반 아키텍처: React는 컴포넌트에 자바스크립트만 사용할 뿐 템플릿 엔진 같은 도메인 특정 언어를 사용하지 않는다.

컴포넌트 기반 아키텍처는 코드 재사용이 쉬워서 코드를 줄일 수 있다.

• 강력한 추상화: React는 DOM을 쉽게 다룰 수 있고, 크로스 브라우징을 위해 다르게 구현할 수 밖에 없었던 인터페이스나 이벤트 핸들링을 정규화했다.

내부의 인터페이스는 숨기고, 대신에 정규화 과정을 거친 합성 메서드와 속성을 제공한다.

서버 측 렌더링 기능은 React의 우수한 DOM 추상화를 증명한다.

(렌더링이란 템플릿으로 HTML을 생성하는 과정을 의미한다.)

서버에서 React 컴포넌트를 렌더링하는 것은 단순히 DOM이나 HTML 문자열을 렌더링하는 것보다 선택권이 다양하다.

1.4 React의 단점

1. React는 JSX 문법을 사용한다.

2. React는 단방향 데이터 바인딩만 제공한다.

단방향 바인딩은 복잡한 앱에서 복잡도를 줄이는 데 도움을 준다.

2.1 엘리먼트 중첩

엘리먼트는 컴포넌트의 인스턴스이며 컴포넌트 클래스라고도 한다.

계층적 방식으로 더 복잡한 구조를 만드는 방법은 엘리먼트를 중첩하는 것이다.

그러나 AngularJS 같은 양방향 바인딩과 다르다.

3. React를 리액티브 프로그래밍이라고 볼수 는 없다.

리액티브 프로그래밍이나 아키텍처는 더 이벤트 기반이고, 탄력성과 반응성이 뛰어나다.

1.5 웹 애플리케이션에 React 적용하기

1.6 React 앱 만들기: Hello World

React 엘리먼트를 직접 에 렌더링하지 않는 이유는 다른 라이브러리나 를 조작하는 브라우저 확장 프로그램과 충돌하는 것을 방지하기 위해서다.

React 엘리먼트를 생성하려면 React.createElement(elementName, data, child)를 호출한다.