Fragment를 이용하면 HTML의 의미를 해치지 않을 수 있음

Fragment

회사 홈페이지 유지보수를 하다가 가끔씩 보았던 녀석들이다.

그냥 의미없는 <>와 같다고는 대충 추측을 했었다.

 

정확히는 어떤 의도로 만들었을까??

 

JSX가 JS로 변환되기 위해 리액트의 리턴문은 반드시 하나의 태그로 감싸져 있어야 한다.

이때 리액트가 작동하게 하기 위해 의미없는 <div>태그를 작성함으로써 HTML의 의미를 깨뜨리곤 한다.
(정보의 의미가 강조되는 HTML 엘리먼트를 사용하면 자연스럽게 접근성이 강조된다.)

 

특히 목록 <ol>,<ul> 혹은 <table>태그를 사용할때 문제가 나타난다.

 

이 경우 Fragment를 사용하여 여러 엘리먼트를 하나로 묶어주는것이 권장된다.

import {Fragment} from 'react';

...

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // 나는 key를 넣기 위해, <div key = {item.id}>와 같이 적곤 했음..
        <Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </Fragment>
      ))}
    </dl>
  );
}

만약 Fragment에 어떤 props도 필요하지 않다면 다음과 같이 짧게 줄여 쓸 수 있음.

function ListItem({ item }) {
  return (
    <>
      <dt>{item.term}</dt>
      <dd>{item.description}</dd>
    </>
  );
}