React Fragment

Fragment?

리액트에서는 하나의 컴포넌트가 여러 개의 엘리먼트들을 반환한다

리액트를 사용하기 위한 문법인 JSX를 쓸 때, return 문 안에는 반드시 하나의 최상위 태그가 있어야 한다

이는 리액트가 하나의 컴포넌트만을 리턴할 수 있기 때문이다

import React from "react";

function App() {
  return (
    <React.Fragment>
      <header className="App-header">
        <h1>sdf{name}</h1>
      </header>
    </React.Fragment>
  );
}
export default App;

처럼 React를 import 해 준 뒤, <React.Fragment>로 감싸 주면 된다

단축 문법

<Fragment> </Fragment> 대신 <> </> 이렇게 써도 된다