[React] Fragment

프래그먼트(Fragment)란?

react에서 여러개의 컴포넌트를 렌더링 하려고 할 때, 불필요한 HTML 요소를 만들지 않고 컴포넌트 그룹화하기 위해 사용되는 개념이다.

<>와 </> 사이에 있는 컴포넌트들은 프래그먼트로 묶여있다.
이렇게 함으로써 불필요한 div요소를 생성하지 않고 여라개의 하위 컴포넌트를 렌더링 할 수 있다.

예제 )

import logo from "./logo.svg";
import "./App.css";

function App() {
  return (
    <>
      <h1>안녕 누리호 1호</h1>
      <h1>안녕 누리호 2호</h1>
    </>
  );
}
export default App;

productList.products.map((el, index) => ...)

위의 코드에서 el은 products 배열의 각 요소를 차례로가리키게 된다. 이후 콜백 함수 내에서 item을 사용하여 각 요소에 title 을 사용하여

요소의 tilte price, id 프로퍼티에 접근하고 있다.

💡
의미 없는 <div> 태그 보다는 Fragment를 사용하자

리액트를 기반으로 개발된 프로젝트들을 보면 가끔 의미 없이 루트 요소를

<div>를 정의한 코드들을 확인할 수 있다.

사용되지 않는 <div>를 쓰는 이유는 리액트에서 정의한

render() 함수는 반환 값의 루트 요소는 하나만 정의되어야 하기 때문이다.

정리

실제로는 사용하지 않지만 JSX규칙에 의해 <div> 와 같이 감싸는 요소를 정의하면

html DOM 구조에도 <div>는 적용된다

필요없는 div태그를 쓰기 보다는 Fragment 를 사용하게 되면 DOM에는 표시 되지 않으며,

HTML 구조에도 문제없이 작동하기 된다.

Fragment는 태그로 감싸도 되지만 ,

<>와 </> 를 이용하면 더욱 간단하게 작성 가능하다.