[ React ] JSX - Fragment 사용

리액트 JSX - Fragment 사용 

React에서 컴포넌트를 나누어서 개발을 할때 불필요하게 div를 반드시 감싸고 내부터 태그를 삽입 하다보면 

불필요하게 DOM구조가 복잡해 진다고 느껴질때가 있습니다.

Fragment를 통해서 불필요한 div 랜더링을 생략 할 수 있습니다. 

Fragment는 리액트 v16 이상에서 사용가능합니다. 

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

class FragmentTest extends Component {
  render() {
    return (
      <Fragment>
        테스트
      </Fragment>
    );
  }
}
export default FragmentTest;

간단하게 class를 하나 만들어 봤습니다. 

사용법

1. 상단에 import {fragment} 추가. 

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

2.return div형태에서 <Fragement> 태그 변경. 

return (
      <Fragment>
        테스트
      </Fragment>
    );