[리액트를 다루는 기술] 1,2장. JSX

import React, {Component} from 'react';
import './App.css'

class App extends Component {
  render(){
    const text = '당신은 어썸한가요?';
    const condition = true;
    const style = {
      backgroundColor: 'gray',
      border: '1px solid black',
      height: Math.round(Math.random()*300)+50,
      width: Math.round(Math.random()*300)+50,
      WebkitTransition: 'all',
      MozTransition: 'all',
      msTransition: 'all'
    };

    return(
     <div className="my-div">
       <h1>리액트 안녕!</h1>
       <h2>{text}</h2>
       { condition ? '참':'거짓' }
       <div style ={style}></div>
     </div>
      );
  }
}

export default App;

<JSX 문법>

• render(): 사용자에게 보이는 뷰(View)를 반환한다. ->어떻게? 문자열 형태의 HTML 코드를 생성한 후, 특정 DOM에 해당 내용을 주입하면 이벤트가 적용된다.
• const: 한번 지정하면 변경이 불가능한 상수를 선언할 때 사용하는 키워드 (ES6) let: 동적인 값을 담을 수 있는 변수를 선언할 때 사용하는 키워드 (ES6)
• <div></div>, <fragment></fragment>: 부모 요소로 감싼다. -> Virtual DOM에서 컴포넌트 변화를 감지할 때, 컴포넌트 내부는 DOM 트리 구조 하나여야 하기 때문이다.
• if문을 사용할 수 없다. -> JSX밖에서 if문을 사용하여 작업 -> { }안에 조건부 삼항 연산자를 사용: { condition ? '참':'거짓' } -> &&연산자로 조건부 렌더링: { condition && '참' } //거짓일 경우에는 보여지지 않음
• DOM요소에 스타일 적용할 때, CSS 스타일을 자바스크립트 객체 형식으로 만들어 적용한다.
• className: react에서 class를 설정할 때는 class대신 className으로 설정해야 한다.