5분 안에 반응 조각(예시 포함)

그리고 당신은 스스로 생각합니다. "오 하느님, 내가 또 뭘 잘못 했나요?"



그러나 다행스럽게도 여러분(그리고 우리 모두 - React 개발자)에게 이번에는 문제가 매우 간단합니다.

문제를 일으킨 코드를 살펴보겠습니다.

import React from "react";

const Fragment = () => {
  return 
  <div>Fragments</div>
  <p>in React</p>
  ;
};

export default Fragment;

보시다시피 Fragment 구성 요소에서 두 개의 JSX 요소를 반환하려고 합니다.

그리고 아마 이해하시겠지만 이것이 우리 문제의 근원입니다.

왜?

구성 요소에서 여러 요소를 반환해야 하는 경우가 일반적인 상황이 아닙니까?

그리고 당신 말이 맞습니다. 이것은 React의 일반적인 패턴입니다.

하지만 다음 사항을 기억해야 합니다.

Component must return only one parent element and not more, not less.

우리는 이것에 대해 무엇을 할 수 있습니까?

따라서 한 가지 해결책은 "div"요소로 래핑하는 것입니다.

효과가 있는지 없는지 살펴봅시다!

import React from "react";

const Fragment = () => {
  return (
    <div className="wrapper">
      <p>Fragments</p>
      <p>in React</p>
    </div>
  );
};

export default Fragment;

만세! 그것은 효과가 있었다!

그러나 이것이 최선의 해결책입니까?

아니!

그에 따른 몇 가지 문제가 있습니다.

우선 DOM에 추가 노드를 추가합니다. 메모리에 추가 공간이 필요합니다.



둘째, 그것은 단지 관련이 없습니다. JSX가 작동하는 데에만 필요합니다. 좀 우스꽝 스럽죠?

그 외에도 때로는 이 div 래퍼가 레이아웃을 손상시키고 잘못된 HTML이 렌더링되도록 할 수도 있습니다!

이 순진한 div가 어떻게 HTML을 깨뜨릴 수 있는지 생각할 것입니다.

이를 보여주는 간단한 예를 보여드리겠습니다!

테이블을 표시하고 싶다고 상상해 봅시다.
그래서 우리는 "table", "tbody", "tr"요소를 정의합니다.

import Fragment from "./fragment";

function App() {
  return (
    <div className="App">
      <table>
        <tbody>
          <tr>
            <Fragment />
          </tr>
        </tbody>
      </table>
    </div>
  );
}

export default App

그리고 데이터 셀("td"요소)에 대해 별도의 구성 요소가 필요하다고 가정해 보겠습니다.

import React from "react";

const Fragment = () => {
  return (
    <div className="wrapper">
      <td>Team </td>
      <td>Points</td>
      <td> Wins</td>
    </div>
  );
};

export default Fragment;

우리는 이미 구성 요소에서 여러 값을 반환할 수 없다는 것을 알고 있습니다.

따라서 "wrapper"클래스를 사용하여 div에서 "td"요소를 래핑합니다(데모 목적으로 이 클래스에 스타일이 적용되지 않음).

이제 잘 되는지 안 되는지 확인해 봅시다!



작동하는 것 같지만 젠장 ...
콘솔을 보라...



div 안에 "td"를 넣을 수 없습니다.
그리고 "tr"은 div 요소를 포함할 수 없습니다.

Q.E.D.

그래서, 우리는 대신에 무엇을 해야 합니까?

당신은 그것을 올바르게 추측했습니다 - 우리는 조각을 사용할 수 있습니다!

프래그먼트는 하위 목록을 그룹화할 수 있는 구문일 뿐이지만(div가 그랬던 것처럼)...

Super important, Fragment does not add an extra node to the DOM.

좋아요, 윈윈처럼 들리죠, 그렇죠?

사용 방법?

아주 쉽습니다!

import React from "react";

const Fragment = () => {
  return (
    <React.Fragment>
      <p>Fragments</p>
      <p>in React</p>
    </React.Fragment>
  );
};

export default Fragment;

우리가 해야 할 일은 div 대신 React.Fragment를 사용하는 것뿐입니다.

또한 빈 태그처럼 보이는 짧은 구문인 React Fragment의 또 다른 형태가 있음을 언급해야 합니다.

import React from "react";

const Fragment = () => {
  return (
    <>
      <p>Fragments</p>
      <p>in React</p>
    </>
  );
};

export default Fragment;

이러한 코드 예제는 모두 이러한 DOM을 생성합니다.



보시다시피 추가 JSX 요소가 DOM에 추가되지 않았습니다!

React.Fragment와 짧은 구문 사이에 차이점이 있나요?

사실 한 가지 작은 차이점이 있습니다.

이 코드 스니펫을 보십시오.

import React from "react";

const Fragment = () => {
  const arrayOfNumbers = [1, 2, 3, 4, 5];
  return arrayOfNumbers.map((number, index) => (
    <>
      <p>{number}</p>
      <p>{index}</p>
    </>
  ));
};

export default Fragment;

배열을 반복하고 각 요소에 대해 2개의 단락(값 자체와 인덱스)을 반환합니다.

이 단락을 빈 태그(React.Fragment의 짧은 구문)에 넣습니다.

모든 것이 잘 작동하지만 ...
콘솔에서 이 오류가 발생했습니다...



React 키에 대한 이전 게시물을 읽으면 이것이 무엇인지, 어떻게 처리하는지 알 것입니다.
그렇지 않다면 !



따라서 아시다시피 부모 요소에 키를 추가해야 합니다.

그리고 여기에 문제가 있습니다.

We cannot do that with the short syntax of React.Fragment.

대신 React.Fragment를 사용하고 키 속성을 지정해야 합니다.

import React from "react";

const Fragment = () => {
  const arrayOfNumbers = [1, 2, 3, 4, 5];
  return arrayOfNumbers.map((number, index) => (
    <React.Fragment key={index}>
      <p>{number}</p>
      <p>{index}</p>
    </React.Fragment>
  ));
};

export default Fragment;

간략한 결론:

Fragments can be used whenever you need to return multiple JSX elements from the component.
You should be using them instead of wrapping everything in a div because React.Fragment does not add an extra node to the DOM. There are 2 forms of it: full and short syntax.
The only difference between them is that you cannot use key attribute (if you need one) with short syntax.

그게 다야.

오늘 새로운 것을 배웠기를 바랍니다!
이 게시물에 좋아요를 누르거나 아래 댓글을 남겨주시면 감사하겠습니다!

또한 GitHub 및 Medium에서 저를 팔로우하세요!

Adios, mi amigos)