React 16의 조각이 컨테이너 div보다 나은 이유는 무엇입니까?

React 16의 조각이 컨테이너 div보다 나은 이유는 무엇입니까?

---

React 16.2에는 개선 된 지원 Fragments이 추가되었습니다. 자세한 내용은 React의 블로그 게시물 에서 확인할 수 있습니다 .

우리는 모두 다음 코드에 익숙합니다.

render() {
  return (
    // Extraneous div element :(
    <div>
      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </div>
  );
}

예, 컨테이너 div가 필요하지만 그렇게 큰 문제는 아닙니다.

React 16.2에서는 주변 컨테이너 div를 피하기 위해이 작업을 수행 할 수 있습니다.

render() {
  return (
    <Fragment>
      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </Fragment>
  );
}

두 경우 모두 내부 요소를 둘러싸는 컨테이너 요소가 여전히 필요합니다.

내 질문은 왜 Fragment바람직한 것을 사용하는 것 입니까? 성능에 도움이됩니까? 그렇다면 왜 그렇습니까? 통찰력을 사랑합니다.

---

1. 조금 더 빠르며 메모리 사용량이 적습니다 (추가 DOM 노드를 만들 필요 없음). 이것은 매우 크고 깊은 나무에만 실질적인 이점이 있지만 응용 프로그램 성능은 종종 수천 컷으로 인해 죽음으로 고통받습니다. 이것은 한 컷 덜입니다.
2. Flexbox 및 CSS Grid와 같은 일부 CSS 메커니즘에는 특수한 부모-자식 관계 div가 있으며 중간에 s를 추가 하면 논리적 구성 요소를 추출하는 동안 원하는 레이아웃을 유지하기가 어렵습니다.
3. DOM 관리자는 덜 복잡합니다. :-)

이 React 문제에서 다른 사용 사례에 대한 설명을 찾을 수 있습니다. 렌더에서 여러 구성 요소를 반환하도록 프래그먼트 API 추가

---

위의 모든 답변에 한 가지 장점이 더 있습니다. 코드 가독성 , Fragment구성 요소는 구문 설탕 양식을 지원합니다 <>. 따라서 질문의 코드는 다음과 같이 더 쉽게 작성할 수 있습니다.

render() {
  return (
    <>
      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </>
  );
}

에 따르면 문서 ,

React <React.Fragment/>에서 이전 섹션의 예제와 같이 요소의 설탕을 제거합니다. JSX를 사용하는 비 반응 프레임 워크는 다른 것으로 컴파일 될 수 있습니다.

혼란스럽지 않습니까?

프래그먼트 <Fragment>에 제공해야하는 경우 여전히 구문 을 사용해야 합니다 key.

---

• JSX에서는 불가능했던 기능 추가
• 시맨틱 jsx 마크 업이 향상되었습니다. 랩퍼 요소는 강제되어 있기 때문에 필요할 때 사용됩니다.
• 전체 돔 마크 업 감소 (렌더 성능 향상 및 메모리 오버 헤드 감소)

래퍼 요소가 필요하지 않을 때처럼 간단하게 사용할 수 있습니다. 더 적은 요소를 갖는 것이 좋지만 가장 큰 장점은 이전에는 불가능했던 요소를 jsx로 렌더링 할 수 있고 래퍼 요소에 더 나은 의미 론적 의미를 추가하는 것입니다.

This wasn't possible before:

 <select>
    {this.renderOptions()}
 </select>

Glancing at the following in React 15 you can't tell if the wrapper element is needed or not:

<span>
  <h1>Hello</h1>
  {this.getContent()}
</span>

---

As per the reatjs.org docs most important needs of <Fragments> <Fragments/> instead of div's are to avoid breaking HTML semantics. When we use div's instead of <Fragments> <Fragments/> we break the HTML semantics. to know more about html semantics. please click and also there are cases where if you use div's instead of Fragments it will be invalid html for example look at this code.

class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}
Result in table output of Columns Component  
<table>
      <tr>
        <div>
          <td>Hello</td>
          <td>World</td>
        </div>
      </tr>
 </table>

Fragments solve this problem.

---

1. Using <React.Fragment>...</React.Fragment>, we can add a parent tag to our JSX elements without adding an extra node to the DOM.
2. you can replace the extra div tags with React.Fragment
3. writing React.Fragment every time is too long for you. React.Fragment has a shorthand syntax that you can use. It is <>...</>.

참고URL : https://stackoverflow.com/questions/47761894/why-are-fragments-in-react-16-better-than-container-divs