"Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag" 오류 해결

2024-04-02

"javascript", "reactjs", "render"와 관련된 "Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag" 오류는 React에서 여러 JSX 요소가 인접하게 사용될 때 발생합니다. React는 단일 루트 요소만을 렌더링할 수 있기 때문에 여러 요소를 렌더링하려면 부모 요소로 감싸야 합니다.

원인:

이 오류는 다음과 같은 경우 발생합니다.

  • 여러 JSX 요소가 인접하게 사용될 때
  • 조건문이나 반복문을 사용하여 여러 JSX 요소를 렌더링할 때
  • 컴포넌트에서 여러 JSX 요소를 반환할 때

해결 방법:

이 오류를 해결하려면 다음과 같은 방법을 사용할 수 있습니다.

  1. 부모 요소로 감싸기: 가장 간단한 방법은 모든 JSX 요소를 하나의 부모 요소로 감싸는 것입니다. 예를 들어, 다음 코드에서:
return (
  <h1>Hello</h1>
  <p>World!</p>
);

<h1> 요소와 <p> 요소를 <div> 요소로 감싸면 다음과 같이 됩니다.

return (
  <div>
    <h1>Hello</h1>
    <p>World!</p>
  </div>
);
  1. React Fragment 사용: React Fragment는 여러 JSX 요소를 하나의 부모 요소로 감쌀 수 있는 특수 요소입니다. Fragment는 실제 DOM 요소를 생성하지 않으므로 성능 향상에도 도움이 됩니다. 예를 들어, 다음 코드에서:
return (
  <h1>Hello</h1>
  <p>World!</p>
);

Fragment를 사용하여 다음과 같이 작성할 수 있습니다.

return (
  <>
    <h1>Hello</h1>
    <p>World!</p>
  </>
);
  1. 배열 사용: 여러 JSX 요소를 배열에 담아 렌더링할 수도 있습니다. 하지만 이 방법은 각 요소에 고유한 key prop를 제공해야 하기 때문에 권장되지 않습니다. 예를 들어, 다음 코드에서:
return (
  [<h1>Hello</h1>, <p>World!</p>]
);

각 요소에 key prop를 추가하면 다음과 같이 됩니다.

return (
  [
    <h1 key="hello">Hello</h1>,
    <p key="world">World!</p>,
  ]
);

참고:

  • 이 문서는 2024년 3월 31일 기준으로 작성되었습니다.
  • 이 문서는 참고용이며, 상황에 따라 다른 해결 방법이 있을 수 있습니다.



예제 코드

예제 1:

const App = () => {
  return (
    <h1>Hello</h1>
    <p>World!</p>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
Error: Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

다음과 같이 부모 요소로 감싸거나 Fragment를 사용하여 오류를 해결할 수 있습니다.

const App = () => {
  return (
    <div>
      <h1>Hello</h1>
      <p>World!</p>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
const App = () => {
  return (
    <>
      <h1>Hello</h1>
      <p>World!</p>
    </>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
const App = () => {
  const condition = true;

  return (
    {condition && <h1>Hello</h1>}
    {condition && <p>World!</p>}
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
Error: Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?
const App = () => {
  const condition = true;

  return (
    <>
      {condition && <h1>Hello</h1>}
      {condition && <p>World!</p>}
    </>
  );
};

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



"Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag" 오류 해결을 위한 대체 방법

Higher-Order Component (HOC) 사용:

HOC는 컴포넌트를 감싸서 재사용 가능한 기능을 추가하는 함수입니다. HOC를 사용하여 여러 JSX 요소를 감싸고 부모 요소 역할을 할 수 있습니다. 예를 들어, 다음 코드에서:

const App = () => {
  return (
    <h1>Hello</h1>
    <p>World!</p>
  );
};

const withWrapper = (Component) => {
  return () => (
    <div>
      <Component />
    </div>
  );
};

const WrappedApp = withWrapper(App);

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

withWrapper HOC는 App 컴포넌트를 감싸고 <div> 요소로 감싸줍니다.

React Portals는 DOM 트리의 다른 위치에 컴포넌트를 렌더링할 수 있게 해줍니다. Portals를 사용하여 여러 JSX 요소를 다른 부모 요소에 렌더링할 수 있습니다. 예를 들어, 다음 코드에서:

const App = () => {
  return (
    <div>
      <h1>Hello</h1>
      <Portal>
        <p>World!</p>
      </Portal>
    </div>
  );
};

const portalRoot = document.getElementById('portal-root');

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

ReactDOM.render(<p>World!</p>, portalRoot);

Portal 컴포넌트는 p 요소를 portalRoot 요소에 렌더링합니다.

Custom Render Function 사용:

React.render 함수는 컴포넌트를 DOM 요소에 렌더링하는 데 사용됩니다. Custom Render Function을 사용하여 여러 JSX 요소를 렌더링하는 로직을 직접 구현할 수 있습니다. 예를 들어, 다음 코드에서:

const render = (elements) => {
  const container = document.createElement('div');

  elements.forEach((element) => {
    container.appendChild(element);
  });

  document.getElementById('root').appendChild(container);
};

const App = () => {
  return (
    <h1>Hello</h1>
    <p>World!</p>
  );
};

render([<h1>Hello</h1>, <p>World!</p>]);

render 함수는 <h1> 요소와 <p> 요소를 root 요소에 렌더링합니다.

주의 사항:

  • HOC, Portals, Custom Render Function은 상황에 따라 유용할 수 있지만, 더 복잡하고 이해하기 어려울 수 있습니다.
  • 간단한 경우에는 Fragment를 사용하는 것이 가장 좋습니다.

javascript reactjs render


jQuery를 사용하여 선택된 라디오 버튼 확인하기

:checked 선택자 사용:위 코드는 :checked 선택자를 사용하여 선택된 라디오 버튼을 찾습니다. :checked 선택자는 checked 속성이 true인 요소를 선택합니다.change 이벤트 사용:위 코드는 change 이벤트를 사용하여 라디오 버튼 선택을 감지합니다...


Math.random() 함수를 사용하여 특정 범위 내 무작위 정수 생성

Math. random() 함수는 0에서 1 사이의 난수를 반환합니다. 이 함수를 사용하여 특정 범위 내의 무작위 정수를 생성하려면 다음 단계를 수행합니다.장점:간단하고 명확한 코드모든 브라우저에서 호환Math. random() 함수는 실수를 반환하기 때문에 정수 변환 과정이 필요합니다...


JavaScript로 HTML 요소에서 CSS 클래스 제거하기 (jQuery 없이)

element. classList 속성 사용하기:가장 간단하고 현대적인 방법은 element. classList 속성을 사용하는 것입니다. 이 속성은 요소의 클래스 목록을 나타내는 DOMTokenList 객체를 제공합니다...


자바스크립트, jQuery 및 문자열에서 하위 문자열 포함 여부를 확인하는 방법

문제: 두 개의 문자열 중 하나가 다른 문자열의 하위 문자열인지 확인하는 방법은 무엇입니까?솔루션:다음은 자바스크립트, jQuery 및 기본 문자열 메서드를 사용하여 하위 문자열 포함 여부를 확인하는 몇 가지 방법입니다...


JavaScript, HTML, ReactJS에서 HTML 문자열을 실제 HTML로 렌더링하는 방법

JavaScript, HTML, ReactJS를 사용하여 HTML 문자열을 실제 HTML로 렌더링하는 방법은 여러 가지가 있습니다. 각 방법마다 장단점이 있으며, 상황에 따라 적절한 방법을 선택해야 합니다.방법:dangerouslySetInnerHTML 사용:...


javascript reactjs render