====== React ======
<WRAP left notice 80%>
  * description : React 관련 내용 기술
  * author      : eleven
  * email       : jskim@repia.com
  * lastupdate  : 2020-08-18
</WRAP>
 
===== Intro =====
React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. \\
“컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다.  \\
by - https://ko.reactjs.org/tutorial/tutorial.html
  * Component 단위의 작성
  * JSX (JavaScript + XML)
  * Virtual DOM 
  * [[https://velog.io/@youthfulhps/React-React%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0|WHY React?]]
\\
  * https://trends.builtwith.com/javascript/React
  * 주요 적용 사이트: 에어비앤비, 인스타그램, 페이스북, 넷플릭스, 전자정부프레임워크
  * 커뮤니티가 거대함;-)
  * ReaceJs를 기반으로 하는 프레임워크도 있음 (안정성, 거대함)
  * 계속 확장하면서 한계를 뛰어 넘으려고 노력함
\\
====JSX====
   * JSX [JavaScript XML]
   * 리액트를 위해서 개발된 자바스크립트 확장 문법. 
   * 자바스크립트 코드 내부에 HTML 태그 형태로 컴포넌트를 만들수 있다. 
   * 단순하게 태그를 만드는 기능 이외에도 태그 내부에 표현식을 삽입해서 출력하는 기능도 제공한다.
바벨 (babel) : JSX 코드를 읽고 일반적인 자바스크립트 문법으로 변환해주는 라이브러리. 자바스크립트 코드 내부에 HTML 코드를 사용할 수 있다.
<code>
<script type="text/babel"></script>
</code>
\\
<code javascript>
const element = <h1>Hello, world!</h1>;

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


>이클립스에서 React 시작하기
<code javascript>
<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언어를 지원해주는 라이브러리 필요.
</code>
\\

>[[wiki:javascript:react:SpringBoot+React|SpringBoot + React 연동하기]]

===== Case Study =====

===== 강의 =====
  * [[https://nomadcoders.co/react-for-beginners|ReactJS로 영화 웹 서비스 만들기]]
 
===== Tip =====
[[https://babeljs.io/|Babel Compiler]]\\
[[https://codepen.io/pen?&editable=true&editors=0010|Codepen]]
===== Troubleshooting =====
 
===== Ref =====
[[https://velog.io/@jkzombie/React-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0Eclipse|Recat 활용하기(Eclipse)]] \\


===== Terms =====
   * Component [컴포넌트]
     * 리액트에서 화면에 출력되는 요소를 의미한다.
       - 루트 컴포넌트 [Root Component] : 가장 최상위에 배치하는 컴포넌트
       - 클래스 컴포넌트 [Class Component] : 사용자가 직접 클래스로 만드는 컴포넌트
       - 함수 컴포넌트 [Functional Component ] : 사용자가 직접 함수로 만드는 컴포넌트
\\
   * Container [컨테이너] : 컴포넌트를 출력할 상자 

{{tag> eleven react JSX 오션 주레피}}