Fragments

오래전에 작성된 글을 복사해온거라 직접 테스트 해보는 것을 권장 ( 참고용 정도로만 올렸음 )

 

• Fragments: DOM에 별도 노드를 추가하지 않고 자식 목록을 그룹화 할 수 있다.

  // 1. Fragments를 사용하면 아래와 같이 된다.
  render() {
    return (
      <React.Fragment>
        <ChildA />
        <ChildB />
        <ChildC />
      </React.Fragment>
    )
  }
  
  // 2. Fragments를 짧은 구문으로 사용한 예시이다.
  // 짧은 구문은 많은 도구에서 아직 지원하지 않기 때문에 명시적으로 <React.Fragment> 를 사용하자.
  render() {
    return (
      <>
        <ChildA />
        <ChildB />
        <ChildC />
      </>
    )
  }      
  
  // 3. key가 있는 Fragments
  // Fragments에 key가 있다면 <React.Fragment> 문법으로 명시적으로 선언해야 합니다. 예를 들어 정의 목록을 만들기 위해 컬렉션을 fragments 배열로 매핑하는 사용 사례이다.
  return (
    <dl>
      {props.items.map(item => (
        // React는 `key`가 없으면 key warning을 발생합니다.
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );