React

React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다.
“컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다.
by - https://ko.reactjs.org/tutorial/tutorial.html

• Component 단위의 작성
• JSX (JavaScript + XML)
• Virtual DOM
• WHY React?

• https://trends.builtwith.com/javascript/React
• 주요 적용 사이트: 에어비앤비, 인스타그램, 페이스북, 넷플릭스, 전자정부프레임워크
• 커뮤니티가 거대함
• ReaceJs를 기반으로 하는 프레임워크도 있음 (안정성, 거대함)
• 계속 확장하면서 한계를 뛰어 넘으려고 노력함

• JSX [JavaScript XML]
• 리액트를 위해서 개발된 자바스크립트 확장 문법.
• 자바스크립트 코드 내부에 HTML 태그 형태로 컴포넌트를 만들수 있다.
• 단순하게 태그를 만드는 기능 이외에도 태그 내부에 표현식을 삽입해서 출력하는 기능도 제공한다.

바벨 (babel) : JSX 코드를 읽고 일반적인 자바스크립트 문법으로 변환해주는 라이브러리. 자바스크립트 코드 내부에 HTML 코드를 사용할 수 있다.

<script type="text/babel"></script>

const element = <h1>Hello, world!</h1>;
 
const name = 'eleven';
const element = <h1>Hello, {name}</h1>;    // 중괄호 안에서 변수 또는 함수를 사용할 수 있다.

이클립스에서 React 시작하기

<script src="https://unpkg.com/react@15/dist/react.min.js"></script>                             // react.  
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>                     // react-dom. 화면출력을 위해 필요.
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>  // babel. es6언어를 지원해주는 라이브러리 필요.

SpringBoot + React 연동하기

• ReactJS로 영화 웹 서비스 만들기

Babel Compiler
Codepen

Recat 활용하기(Eclipse)

• Component [컴포넌트]
  • 리액트에서 화면에 출력되는 요소를 의미한다.
    1. 루트 컴포넌트 [Root Component] : 가장 최상위에 배치하는 컴포넌트
    2. 클래스 컴포넌트 [Class Component] : 사용자가 직접 클래스로 만드는 컴포넌트
    3. 함수 컴포넌트 [Functional Component ] : 사용자가 직접 함수로 만드는 컴포넌트

• Container [컨테이너] : 컴포넌트를 출력할 상자