# Reactjs

# Reactjs

by jihoon kim

HTML

<style>
.MJXp-math.MJXp-display {
  display:inline !important;
}
</style>
<div id="contents">
## React?
  - 페이스북에서 개발한 유저인터페이스 라이브러리.
  - 재사용 가능한 UI를 생성.
  - 페이스북, 인스타그램, 야후, 넷플릭스 등에서 이용.

## DOM - Document Object Model
  - 객체를 통해 문서를 표현한는 방법.
  - DOM은 트리형태로 되어있다.

## reflow & repaint를 최소화해야함.
  - 레이아웃을 새로 구성하면서 계산   - reflow
  - 색상변경만                        - repaint

  - reflow가 실행되는 경우.
        :> element.offsetLeft, element.clientWidth, element.getClientRects()
        ::> offsetTop, scrollTop, getComputedStyle() reflow가 여러번 발생할 수 있다.

  - reflow가 빈번히 발생하면 처리 비용이 상승함.
  - Virtual DOM을 이용해 변경된 내용만 반영하는 구조를 구현함.

## Virtual DOM
  - React 이용.
  - Vue.js 2.0 이용.

    ※ 참고
        브라우저는 어떻게 동작하는가? : https://d2.naver.com/helloworld/59361

```javascript
    let domNode = {
        tag: 'ul',
        attributes: { id: 'myId' },
        children: [
            // where the LI's would go
        ]
    };
    domNode.children.push('<li>Item 3</li>')
```
    ※ 참고
        http://mygumi.tistory.com/190 [마이구미의 HelloWorld]

## Virtual DOM 실행 구조.
  - domNode 객체 == Virtual DOM
    - DOM API를 사용하지 않고,
            >> domNode를 변경한다,
                >>> 변경된 부분만 찾아 실제 DOM에 변경해 준다.
                >>> domNode는 실제 DOM이 아닌 메모리에 있어 빠르다.

## JSX란?
  - Javascript + XML
    기존 자바스크립트의 확장 문법.

## Babel+JSX
  - Babel은 트랜스파일러이다.
  - JSX를 실행할 수 있게 만들어주는 변환기.

    - 서버기반으로 트랜스파일링시 type="text/babel"를 이용한다.
```JavaScript    
<script type="text/babel">
    (function() {
        var HelloWorld = React.createClass({
            render : function() {
                return (
                <div> Hello World </div>
                );
            }
        });
        var element = React.createElement(HelloWorld, {});
        ReactDOM.render(element, document.getElementById("app"));
    })();

</script>
```
- babel.js를 인클루드하는 방법.
```JavaScript
<script type="text/javascript" src="/js/babel/babel.js"></script>
<script type="text/jsx"
    data-presets="es2017,react,stage-0"
   ...