React Fragment 란?

Fragment React Fragment 란?

 

React 16 이전 버전에선 하나의 element만 return 할 수 있는 React의 특성 때문에

여러 개의 태그를 리턴하기 위해선 하나의 부모 태그가 필요했다!

Fragment 태그를 사용하여 여러 개의 태그를 리턴할 수 있다.

 

이로 인해 불필요한 div 렌더링을 피할 수 있게 되었음!@!

 

import React, { Component, Fragment } from 'react';
 
class Test extends Component {
  render() {
    return (
      <Fragment>
        <header/>
        <div />
        <footer />
      </Fragment>
    );
  }
}
 
function App() {
  return (
    <div className="App">
      <Test></Test>
    </div>
  );
}
 
export default App;

 

아래와 같이 렌더링이 잘 된 것을 확인 할 수 있음!