[React] React란, JSX 기본 문법 (1/3)

프론트엔드 라이브러리 종류

Angular	TypeScript 기반
React	Virtual DOM 지원
Vue	Virtual Dom 지원, TypeScript 지원

* React 메뉴얼 : 우리는 지속해서 데이터가 변화하는 대규모 애플리케이션을 구축하기 위해 만듦

* Virtual DOM : DOM의 구조만 간결히 흉내낸 자바스크립트 객체

 

---

React 시작하는 방법

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div>
                <h1>안녕하세요 리엑트</h1>
            </div>
        );
    }
}

- 'react' : react 모듈을 불러와서 사용함

- import : import 를 사용하여 불러올 수 있음

- Component : react 를 component로 불러오고 클래스를 만들어줄 수 있음

- render : 모든 component는 render라는 함수가 있어야함

- return : render 함수에서는 js를 리턴해여함

---

JSX란?

XMl과 유사, 자바스크립트의 확장 문법

쉽게 말해서 HTML 문법을 JavaScript 코드 내부에 쓴 것

---

React 에서 주의할 점

1. 태그 닫기

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
        	<input type="text"> // 오류 생김
            <input type="text"></input> // 올바른 예시 1
            <input type="text"/> // 올바른 예시 2
        );
    }
}

2. 태그 중복 사용

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div>
                <h1>안녕하세요 리엑트</h1>
            </div>
            <div>
                <h1>안녕하세요 리엑트</h1>
            </div>
        );
    }
}

* 위처럼 코드를 작성하게 될 경우 오류 발생

"JSX 식에는 부모 요소가 하나 있어야 합니다."

import React, { Component, Fragment } from 'react';

class App extends Component {
    render() {
        return (
            <Fragment>
                <div>
                    <h1>안녕하세요 리엑트</h1>
                </div>
                <div>
                    <h1>안녕하세요 리엑트</h1>
                </div>
            </Fragment>
        );
    }
}

* 위처럼 오류 수정 가능