2. 엘리먼트 와 JSX : elements and jsx

2.1. 리엑트 기본 요소(elemnents) 는 div,span, h1-6, form, input 등과 같은 태그로 감싸져 있음

<div>Hello React</div>

2.2. jsx 요소 표현 방법

// 변수 할당 방법, 홑/쌍 따옴표를 사용하지 않음에 유의하기 바랍니다.
const greeting = <div>Hello React</div>;
const isNewToReact = true;

// 조건에 따라 표현 가능
function sayGreeting() {
  if (isNewToReact) {
        // 변수 또는 표현식을 직접 기입해도 된다.
    return greeting;
  } else {
return <div>Hi again, React</div>; }
}

2.3. jsx 는 중첩(nest) 표현 방식을 허용

const year = 2020;
// 컬리브레이스(중괄호)를 사용하여 변수를 사용할 수 있다.
const greeting = <div>Hello React in {year}</div>;

2.4. 줄바꿈을 사용할 때에는 퍼렌디스(소괄호)를 사용

const greeting = (
// 부모 요소는 반드시 1개만 존재해야 됨
<div>
    <h1>Hello!</h1>
    <p>Welcome to React</p>
</div>
);

2.5. html 과 jsx 는 문법이 약간 다름에 유의

• 빈 div 표현 : html <div></div> / jsx <div/>
• 하나의 태그요소 : html <input> / jsx <input />
• 속성값은 카멜케이스 형태로 작성한다 : ex) fontSize

/* jsx */
<button class="submit-button" style={{color:"red", fontSize:"9px"}}>Submit</button>

/* html */
<button class="submit-button" style="color: red; font-size: 9px;">Submit</button>

2.6. 기본 react app 구성

// npm 패키지 또는 CDN 주소에서 필요로 하는 정보를 import (불러들이기) 한다 
import React from 'react';
import ReactDOM from 'react-dom';
const greeting = <h1>Hello React</h1>;

// ReactDOM.render(최상위(루트) 노드 , 마운팅 지점(루트노드 삽입 지점))
ReactDOM.render(greeting, document.getElementById('root'));

---

React 2020 CheatSheet

이전 글 보기 | 다음 글 보기

01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 | 13 | 14 |