[React] Pragment

JSX

※ 주의할 점

 - JSX로 html태그를 작성할때는 하나로 감싸진 태그로 작성

import ReactDOM from 'react-dom';

ReactDOM.render(
    <p>안녕</p>
    <p>리액트!</p>, // 오류 발생
    document.getElementById('root')
    );

import ReactDOM from 'react-dom';

ReactDOM.render(
    <div> // <div>라는 하나의 태그로 감싸서 오류 해결
    <p>안녕</p>
    <p>리액트!</p>
    </div>,
    document.getElementById('root')
    );

 

 

<Fragment>

import { Fragment } from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <Fragment>
    <p>안녕</p>
    <p>리액트!</p>
    </Fragment>,
    document.getElementById('root')
    );

 

 

<Fragment> 축약형<>

import ReactDOM from 'react-dom';

ReactDOM.render(
    <> // <Fragment>축약형
    <p>안녕</p>
    <p>리액트!</p>
    </>,
    document.getElementById('root')
    );