1. React

2017.07 React with TypeScript 스터디 정리.

React?

FaceBook에서 유저인터페이스를 위해 개발한 Javascript OpenSource Library 로써,

UI(User Interface)에 집중하여 재사용 가능한 UI를 생성 할 수 있게 도와줍니다.

React는 Virtual Dom이라는 개념을 사용하여, 상태의 변함에 따라 선택적 랜더링을 함으로써

최소한의 Dom 처리로 컴포넌트들을 업데이트 할 수 있게 해줍니다.

- virtual Dom 에서 우선 변경사항을 감지하여 변경후, 실제 Dom에 변경사항을 적용합니다 -

< Virtual Dom 을 설명한 영상입니다 >

Component

React에서 작업의 단위는 Component 입니다.

React의 Component는 개념상 Javascript 함수와 동일합니다.

즉 props라는 입력을 받아서, 무엇이 화면에 나타나야 하는지를 설명하는 React Element를 반환합니다.

컴포넌트를 생성하는 방법에는 크게 2가지 방법이 있는데, 이것에 대해서는 추후에 포스팅 하겠습니다.

JSX - Javascript XML

React.js 는 일반 JavaScript 문법이 아닌 JSX 문법을 사용하여 UI를 템플릿화 합니다.

JSX는 하나의 문법으로서, HTML과 거의 비슷하여 기존에 HTML을 사용한 경험이 있다면, 빠르게 사용 가능합니다.

< 앞으로 예시 코드의 경우 ES6 구문을 사용합니다. http://es6-features.org/#Constants >

import * as React from 'react';

class App extends React.Component<{}, {}> {

render() {

return (

<h1>Hello Jaro!!</h1>

);

}

}

export default App;

---

참고 슬라이드 - http://slides.com/woongjae/react-with-typescript-1#/

참고 동영상 - https://www.youtube.com/playlist?list=PLV6pYUAZ-ZoHx0OjUduzaFSZ4_cUqXLm0

참고 페이지 - https://facebook.github.io/react/

  https://velopert.com/