ReactJS - 프래그먼트
안녕하세요, 열정적인 개발자 여러분! 오늘 우리는 React의 유용한 기능 중 하나인 프래그먼트에 대해 알아보겠습니다. 여러분의 친절한 이웃 컴퓨터 과학 교사로서, 이 주제를 안내해 드리는 것을 기쁘게 생각합니다. 이 강의가 끝나면 여러분은 프래그먼트를 마스터하겠죠! 그럼 시작해 보겠습니다.
프래그먼트는 무엇인가요?
여러분이 여행을 준비할 때, 짐을 간편하게 모아두고 싶은 마음이 있을 거예요. 프래그먼트는 exactly 그런 역할을 합니다! React에서는 여러 요소를 그룹화할 수 있지만 DOM에 추가 노드를 추가하지 않습니다.
React에서 컴포넌트는 단일 요소만을 반환할 수 있습니다. 이는 개발자들이 불필요한 <div>로 여러 요소를 감싸는 데 이르게 했습니다. 프래그먼트는 이 문제를 훌륭하게 해결합니다.
간단한 예제를 보겠습니다:
import React from 'react';
function WithoutFragment() {
return (
<div>
<h1>Hello</h1>
<p>World</p>
</div>
);
}
function WithFragment() {
return (
<React.Fragment>
<h1>Hello</h1>
<p>World</p>
</React.Fragment>
);
}WithoutFragment 컴포넌트에서는 우리는 요소들을 감싸기 위해 <div>를 사용해야 합니다. 하지만 WithFragment에서는 React.Fragment를 사용하여 요소들을 그룹화하면서 추가 DOM 노드를 추가하지 않습니다.
축약 문법
매번 React.Fragment를 타이핑하는 것은 조금 귀찮을 수 있습니다. 시험지에 이름을 매번 적는 것과 같은 느낌이랍니다! 幸운히도, React는 축약 문법을 제공합니다:
function ShortSyntax() {
return (
<>
<h1>Hello</h1>
<p>World</p>
</>
);
}빈 태그 <>와 </>는 <React.Fragment>와 </React.Fragment>의 축약 형태입니다. 이름 대신 별명을 사용하는 것처럼, 짧고 달콤합니다!
프래그먼트를 사용하는 이유
여러분은可能会想, "프래그먼트를 왜 귀찮게 사용해야 하죠? <div>를 사용하는 것에 무엇이 문제인가요?" 훌륭한 질문입니다! 예제로 설명해 드리겠습니다:
function TableExample() {
return (
<table>
<tr>
<React.Fragment>
<td>Hello</td>
<td>World</td>
</React.Fragment>
</tr>
</table>
);
}이 예제에서, 우리가 <div>를 프래그먼트 대신 사용했다면, <div>가 <tr>의 자식으로 허용되지 않기 때문에 HTML이 유효하지 않게 됩니다. 프래그먼트는 <td> 요소들을 테이블 구조를 깨지게 하지 않고 그룹화할 수 있게 해줍니다.
키와 함께하는 프래그먼트
이제 레벨 업해 보겠습니다! 가끔, 특히 목록을 렌더링할 때 프래그먼트에 키를 추가해야 합니다. 이렇게 할 수 있습니다:
function Glossary(props) {
return (
<dl>
{props.items.map(item => (
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.description}</dd>
</React.Fragment>
))}
</dl>
);
}이 예제에서 우리는 React.Fragment에 key 속성을 사용하고 있습니다. 이는 배열을 매핑하고 결과 프래그먼트에 키를 할당할 때 유용합니다.
참고로, 키가 필요할 때는 축약 문법 <>를 사용할 수 없습니다. 별명을 여권에 사용하려고 하는 것처럼, 작동하지 않습니다!
프래그먼트를 사용할 때
여기서 도움이 되는 표를 제공해 드려, 프래그먼트를 사용할지 여부를 결정하는 데 도움을 드리겠습니다:
| 시나리오 | 프래그먼트 사용? | 설명 |
|---|---|---|
| 추가 DOM 노드 없이 요소 그룹화 | 예 | 프래그먼트는 추가 DOM 요소를 생성하지 않습니다 |
| 컴포넌트에서 여러 요소 반환 | 예 | 컴포넌트는 단일 요소를 반환해야 하며, 프래그먼트는 추가 감싸는 요소 없이 이를 허용합니다 |
| 배열 매핑 시 각 항목에 여러 요소 반환 | 예 | 키가 있는 프래그먼트를 사용하는 경우 |
| 스타일이나 이벤트 핸들러를 감싸는 요소 추가 | 아니요 |
<div>나 다른 적절한 요소를 사용하세요 |
결론
이제 여러분은 React 프래그먼트의 세계를 여행했습니다. 기본 사용법에서 키가 있는 프래그먼트까지, 여러분은 이 강력한 기능을 React 애플리케이션에서 사용할 준비가 되었습니다.
프래그먼트는 여러 컴포넌트를 함께 유지하는 보이지 않는 점胶 같은 존재입니다. DOM을 깨끗하게 유지하고 코드를 의미 있게 만듭니다. 다음 번에 불필요한 <div>를 사용하려고 할 때, 프래그먼트를 사용해 보세요!
React 프로젝트에서 프래그먼트를 연습하여, 코드를 더 깨끗하고 효율적으로 만드는 방법을 배워보세요. 행복한 코딩을 기원하며, 프래그먼트와 함께 하세요!
Credits: Image by storyset