1. React Fragment?
여러 개의 자식을 하나의 부모 요소로 묶기 위해 사용하는 컴포넌트.
HTML 구조 상에 불필요한 DOM 요소를 추가하지 않고도 여러 요소를 그룹화할 수 있게 해줌
import React from "react";
function Example() {
return (
<>
<h1>Title</h1>
<p>This is a paragraph.</p>
</>
);
}
export default Example;
위의 예제에서 <>와 </>는 Fragment의 축약 문법으로, 렌더링 시 실제 DOM에 추가적인 노드를 생성하지 않음
이를 활용하기 좋은 예제가 map 을 사용할 때이다.
map 의 경우 최상위 컴포넌트에 key를 부여해야하는데 key를 부여하고자 불필요한 div를 만들기보단
React.Fragment를 사용하면된다.
key는 React.Fragment 축약형인 <></> 에서는 사용할수 없으므로 아래와 같이 사용하면됨
function List({ items }) {
return (
<>
{items.map((item, index) => (
<React.Fragment key={index}>
<h2>{item.title}</h2>
<p>{item.description}</p>
</React.Fragment>
))}
</>
);
}
'FRONTEND > Next.js' 카테고리의 다른 글
NEXT.JS - API Routes란? (1) | 2024.12.08 |
---|---|
NEXT.JS 의 프리페칭(pre-fetching)의 동작 (1) | 2024.12.08 |
사전 렌더링 이해하기 (0) | 2024.11.28 |
[Next.js 14 + Supabase ] Supabase realtime (3) - 유저별 마지막 접속시간 (0) | 2024.08.19 |
[Next.js 14 + Supabase ] Supabase realtime (2) - 실시간 채팅 구현 (0) | 2024.08.19 |