이것이 인접한 JSX 요소를 반환할 수 없는 이유입니다.

저는 꽤 오랫동안 React를 사용해 왔으며 유지 관리 가능한 애플리케이션을 매우 빠르게 작성할 수 있는 놀라운 도구입니다. 하지만 배우기 시작했을 때 강사가 첫 번째 오류를 보여준 것을 기억합니다.

Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag

그리고 그는 구성 요소에서 하나의 요소만 반환할 수 있다고 말했습니다. 하나 이상의 요소가 있는 경우 div 또는 React.Fragment(나중에 알게 됨)와 같은 상위 요소에 모두 래핑하면 됩니다.

그리고 나는 마치

좋아요!!! 나는 그것을 기억할 수 있습니다.

그러나 React로 시작하는 사람은 그렇게 할 필요가 없습니다.

P.S. Picture of a Unicorn being happy and agreeing(i.e. thumbs up). I wanted to tell this explicitly as the image can be a little pixelated. Pun Intended.

React 작동 방식 이해

JSX를 작성하고 개발 프로세스를 쉽게 진행할 때 내부에서 어떤 일이 발생하는지 살펴보겠습니다.

JSX는 React 라이브러리의 createElement 메서드에 대한 구문 설탕일 뿐이지 만 아무도 피할 수 없는(그리고 누구도 피해서는 안 되는) 달콤한 설탕입니다.
이것이 의미하는 바는 JSX로 할 수 있는 작업을 React.createElement()로 할 수 있다는 것입니다.

h1 요소를 만드는 것으로 시작하겠습니다.

React.createElement("h1", { id: "myHeading" }, "Unicorn Party Here");

createElement를 설명하겠습니다. 첫 번째 인수는 생성하려는 요소의 유형을 정의합니다. 두 번째 인수는 요소 속성의 객체를 취하며 여기서는 ID를 제공합니다. 세 번째 인수는 자식입니다. 즉, 일반 HTML에서 <h1>👉 children here</h1>와 같이 여는 태그와 닫는 태그 사이에 넣을 수 있는 모든 것입니다.
<h1 id="myHeading">Unicorn Party Here</h1>와 같이 렌더링하는 동안 실제 h1을 만듭니다.

상위 요소에 하위 요소를 추가하는 방법

위에서 본 것을 본능적으로 생각하면 다음과 같이 자식 요소를 추가할 수 있습니다.

React.createElement(
  "ul",
  null,
  React.createElement("li", null, "Item one"),
  React.createElement("li", null, "Item two"),
  React.createElement("li", null, "Item three")
);

이것은 다음과 같이 렌더링됩니다.

<ul>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

두 번째 인수 이후의 인수가 자식 인수로 간주되는 것을 볼 수 있습니다. 이것이 JSX를 작성할 때 발생하는 일입니다. JSX는 예제에 표시된 대로 createElement를 사용하고 DOM을 렌더링합니다.

반환 문

이제 JavaScript의 함수에서 무엇을 반환할 수 있는지 다시 생각해 봅시다. 명백한 숫자를 사용하면 함수에서 벗어난 문자열은 배열, 객체 및 다른 함수 사이에 있는 모든 것을 반환할 수 있지만 return 문에 대한 몇 가지 주의 사항을 살펴보겠습니다.

function square(a) {
  return
  a * a;
}

이것은 로 변환됩니다

function square(a) {
  return;
  a * a;
}

return 문은 자동 세미콜론 삽입의 영향을 받기 때문에 줄 바꿈이 허용되지 않습니다. 자세한 내용은 MDN 을 참조하십시오.

따라서 return에 자동 세미콜론이 추가되는 것을 방지하기 위해 괄호()를 사용합니다.

function square(a) {
  return (
    a * a;
  )
}

그러면 정답이 반환됩니다.

하지만 다음 줄을 보면 내가 마시는 유니콘 우유는 🤷‍♀️🤷‍♂️?

function returnSelf(a, b) {
  return (
    a
    b
  )
}

이것은 단순히 잘못된 구문입니다

따라서 두 개의 인접한 JSX 요소를 반환하려고 하면

return (
  <h1>Hello World</h1>
  <p>Are Unicorns even real?</p>
);

와 동일하다

return (
  React.createElement("h1", null, "Hello World")
  React.createElement("p", null, "Are Unicorns even real?")
);

또한 같은 잘못된 구문입니다.

그러나 모든 것을 div로 감싸는 것은 완벽한 해결책처럼 들리며

return (
  <div>
    <h1>Hello World</h1>
    <p>Are Unicorns even real?</p>
  </div>
);

와 동일하다

return (
  React.createElement("div", {id: "container"}, 
    React.createElement("h1", null, "Hello World"),
    React.createElement("p", null, "Are Unicorns even real?")
  )
);

그리고 이것은 완벽하게 유효한 구문입니다. 코딩을 시작한 시점부터 단일 값을 반환한다는 의미입니다. 실제로 유효한 것은 무엇이든 작동하며 이와 같은 요소 배열을 반환할 수도 있습니다.

import React from 'react';
import ReactDOM from 'react-dom';

function ReturnJSXArray() {
  return [<h1>The End</h1>, <h3>🦄🦄🦄🦄</h3>];
}

ReactDOM.render(<ReturnJSXArray />, document.getElementById('root'));

그리고 React는 실제로 이것을 렌더링할 것입니다.

이 글을 읽고 나면 인접한 JSX에 래퍼가 필요하거나 JSX의 배열을 반환할 수도 있다는 것이 매우 명백해 보이지만(피해야 함) React를 배우는 데 너무 푹 빠져서 우리는 명백한 것을 잊는 경향이 있습니다.