리액트 프래그먼트: 무엇을 그리고 왜
3391 단어 javascriptwebdevreactbeginners
React 프래그먼트란 무엇입니까?
React 프래그먼트는 추가 DOM 노드 없이도 여러 HTML 요소를 래핑하거나 그룹화할 수 있는 React에 추가된 구문입니다. React 구성 요소가 여러 요소를 반환해야 할 때 이러한 상황을 주로 접합니다.
React 구성 요소는 하나의 요소만 반환할 수 있기 때문에 전통적인 접근 방식은 div 요소로 래핑하는 것이었습니다. 이 동작은 불필요한 추가 마크업을 생성하고 div의 추가 레이어로 인해 DOM 트리를 무겁게 만듭니다.
단일 구성 요소에서 3개의 하위 구성 요소를 렌더링하는 기존 솔루션은 다음과 같습니다.
const App = () => {
return (
<div>
<ChildA />
<ChildB />
<ChildC />
</div>
);
}
프래그먼트의 경우 다음과 같을 수 있습니다.
const App = () => {
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
);
}
**참고: **React.Fragment는 <>와 같은 빈 태그로 대체될 수도 있습니다.
const App = () => {
return (
<>
<ChildA />
<ChildB />
<ChildC />
</>
);
}
왜 리액트 프래그먼트인가?
프래그먼트에는 3가지 일반적인 사용 사례가 있습니다.
1. 요소 그룹 반환
이것은 프래그먼트의 일반적인 사용 사례입니다. 위에서 논의한 바와 같이 프래그먼트를 사용하면 DOM을 무겁게 만들고 스타일을 지정할 때 종종 문제를 일으킬 수 있는 추가 div 컨테이너를 피할 수 있습니다.
2. 조건부 렌더링
프래그먼트를 사용하면 추가 마크업 없이 조건부로 요소 그룹을 더 쉽게 렌더링할 수 있습니다.
const Login = ({isLoggedIn, name}) => {
{isLoggedIn ? (
<>
<h3>Welcome {name}</h3>
<p>
You are logged in!
</p>
</>
) : (
<>
<h3>Login</h3>
<input type="text" id="username" />
<input type="password" id="password" />
<input type="submit" value="Login" />
</>
)}
}
키 조각으로 배열 렌더링
조각에는 키 소품이 있을 수 있습니다! 이것은 때때로 매우 편리할 수 있는 또 다른 강력한 기능입니다. 그러나 이것은 빈 태그와 함께 사용할 수 없습니다.
이는 다음과 같은 목록을 렌더링할 때 유용할 수 있습니다.
const Glossary = ({items}) => {
return (
<>
{items.map(item => (
// Without the key, React will fire a key warning
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.description}</dd>
</React.Fragment>
))}
</>
);
}
장점
이것이 React 프래그먼트에 대해 알아야 할 전부입니다!
2021년 7월 16일 https://www.wisdomgeek.com에 원래 게시되었습니다.
Reference
이 문제에 관하여(리액트 프래그먼트: 무엇을 그리고 왜), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/saranshk/react-fragments-what-and-why-30h4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
