[React] Fragment

Haeseo Lee·2023년 4월 7일
0

React

목록 보기
5/16
post-thumbnail

React에서 하나의 컴포넌트에서 여러 개의 요소를 반환하기 위해서 하나의 태그로 무조건 감싸야함

사용이유

별도의 노드를 추가하지 않고 여러 자식을 그룹화하기 위해 사용

같은 걸로 묶을 수도 있지만 그것도 결국 렌더링 대상이기 때문에 아무 역할도 하지 않는 불필요한 요소들이 많을수록 애플리케이션이 느려짐

사용 예

import { Fragment } from 'react';

const Form = () => {
  return (
    <Fragment>
      <form>
      </form>
      <form>
      </form>
    </Fragment>
  );
};

import 없이 쓰고 싶다면 <>(빈 태그) 도 사용 가능

const Form = () => {
  return (
    <>
      <form>
      </form>
      <form>
      </form>
    </>
  );
};
profile
잡생각 많은 인간

0개의 댓글