Fragments 사용하기

FrontEnd/React.js

Fragments 사용하기

J._.cobb 2022. 6. 30. 14:41

Fragments 사용하기

컴포넌트 단위로 element를 return할 때 하나의 <html> 태그로 전체를 감싸지 않으면 에러가 발생한다. 이때 <Fragments> 태그로 감싸면 불필요한 <html> 태그를 추가하지 않고 사용할 수 있다.

element 변환 시 하나의 <html> 태그로 감싸지 않으면 다음과 같은 에러 메시지가 표시된다.
- Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you wnat a JSX fragment <>…</>?

예제코드

App.js

import React from 'react';
import './App.css';
import Fragments from './R032_Fragments.js';

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>css 적용하기</p>
      <Fragments/>
    </div>
  );
}

export default App;

R032_Fragments.js

import React, {Component} from "react";

class R032_Fragments extends Component{
  render(){
    return (
      <React.Fragment>
        <p>P TAG</p>
        <span>SPAN TAG</span>
      </React.Fragment>
    )
  }
}

export default R032_Fragments;

코드해설

<React.Fragment> 태그를 사용하지 않았다면, <p> 태그와 <span> 태그가 하나의 태그로 감싸져 있지 않기 때문에 에러가 발생한다.
<Fragment>태그를 약식으로 다음과 같이 사용할 수 있다.

<>
	<p>P TAG</p>
	<span>SPAN TAG</span>
<>

실행결과