React Empty Fragment의 정체는?

글 분류

sub

키워드

react query

생성일

2022/05/17 07:27

최근 수정일

2023/11/01 23:52

작성중

TL;DR

•

실제로 렌더링되지 않아서 필요하다.

•

함수의 return은 두개가 될수 없다. 하나의 함수 return을 위해서 결과물로 하나로 묶어주는 역할. 브라우저에 실제로 렌더되지 않으니 더 필요하다.

⚽️ 목표

React Empty Fragment의 정체가 뭔지 알아보자 - 왜 하나의 컴포넌트는 부모 element가 하나만 있어야 하는가?또한 Araboza

부모요소는 하나인 이유

JSX

•

JavaScript XML의 줄임말

•

JSX는 React.createElement의 Synthetic Sugar → babel이 JSX를 React.createElement로 트랜스파일 해줌 

•

React.createElement는 단 하나만의 컴포넌트를 반환함 → 여러개의 자식요소는 가질 수 있음

// 개발자가 작성하는 JSX
function App() {
  return (
    <div>
      <h1>Hello</h1>
    </div>
  )
}

// Babel로 인해 변경된 JSX
function App() {
  return React.createElement(
    "div",
    null,
    React.createElement("h1", null, "Hello")
  )
}
JavaScript
복사

Fragments 이전

•

React 16.2 전 까진 무조건 HTML Element(주로 div 태그를 이용하여)를 이용해서만 여러 컴포넌트를 묶어야 했었습니다.

return (
	<div>
	  <ChildA />
		<ChildB />
		<ChildC />
	</div>
 );
}
JavaScript
복사

Fragment 등장 이후

•

16.2 부터 React.Fragment가 탄생! → 물론 실제로 div나 article, section이 필요한 경우에는 사용할 수 있으나 프로젝트 구조 상 필요없을 경우 사용가능해졌다는 뜻

return (
	<React.Fragment> {/* 간단하게 <>로 대체 가능 */}
	  <ChildA />
		<ChildB />
		<ChildC />
	</React.Fragment>
 );
}
JavaScript
복사

특징

실제로 렌더링 되지 않음

→ 실제로 렌더링 되지 않는다 라는 사실 덕분에 2번 3번의 효과도 발생함 → 실제로 추가 DOM Node를 생성하지 않으므로 아주 약간의 퍼포먼스 향상이 발생함(큰 규모의 앱이면 앱일 수록 더 좋은 퍼포먼스 향상)

Flexbox, Grid와 같은 케이스에서 추가적인 작업 없이 수행할 수 있음 → div 태그로 감쌀경우 의도치 않게 정렬이 적용되므로

돔구조가 단순해짐 → 조금 억지 같긴하지만... 개발자도구에서 좀더 편하게 볼 수 있다구우우웃?!?!?

React Empty Fragment의 정체는?

.css-hopgjw{font-family:var(--emoji-font-family);white-space:nowrap;}⚽️ 목표

부모요소는 하나인 이유

JSX

Fragments 이전

Fragment 등장 이후

특징

참조

⚽️ 목표