[react] Fragments

React Fragments 사용법

1. import {Fragments} from 'react';
2. use <> </>

사용 이유

하나의 컴포넌트에서 여러개의 엘리먼드를 렌더링 할때, 리액트에서는 하나의 부모로 묶어줘야한다. 이때 <div> </div> 를 사용해 묶으면, 의도와는 다르게 ui 가 보여질 수 있다. 따라서 아무 역할 없이 단지 Fragment 를 만드는 react.Fragments 혹은 <> </> 를 사용하면 원하는 대로 ui 를 만들 수 있다.

코드

import { Fragment } from "react";

export default function Row({ content, fee, content2, fee2 }) {
  return (
    <Fragment>
      <tr>
        <td>{content}</td>
        <td>{fee}</td>
      </tr>
      <tr>
        <td>{content2}</td>
        <td>{fee2}</td>
      </tr>
    </Fragment>
  );
}