React Fragment

YEZI🎐·2022년 6월 16일

React

목록 보기

9/29

강의를 듣다보니 강사님이 <></> 라는 태그를 쓰는 거다.
나는 이런 거 처음 봄,,
<></> 이것이 <div></div>의 약자인 걸까 개발자 모드를 켜 확인해봤는데
아무것도 없다
<></> 이거 안에 넣은 다른 태그만 있을 뿐,,

그래서 궁금해서 찾아보고 안 까먹기 위해 가볍게 쓰는 글,,

~~++ 강사님 넘 좋고 잘 알려주시는데 <></> 이런 거나 부가적인건 안 알려주신다 ㅠ 흑ㅎ그~~

Fragment

쓰는 이유

리액트에서는 정의한 render() 함수는 반환 값의 루트 요소가 하나만 정의되어야 한다.
때문에 리액트 기반 프로젝트를 보면 루트 요소를 하나로 만들기 위해 <div></div>를 쓰곤 한다.
이 의미없는 <div></div>를 쓰지 않으면서 루트 요소를 하나만 정의할 수 있도록 해주는 것이 Fragment인 것이다.
++ Fragment는 React에서만 동작한다.

Fragment 사용

아래와 같은 코드의 경우,
<div>는 루트 요소를 하나로 만들기 위해 <img>와 <p>를 감싸는 용도로만 사용되고 있다.

import React from 'react';
function Welcome(){
	return (
		<div>
			<img src="ghibli.png" alt="welcome Ghibli" />
			<p>이미지 이름</p>
		</div>
	);
}

export default Welcome;

위 코드를 실행했을 때 결과는 이렇게 나온다.

감싸는 용도로만 활용된다면 사용하지 않는 태그가 괜히 있는 것이 된다.

이제 Fragment 사용해보면,

import React from 'react';
function Welcome(){
	return (
		<React.Fragment>
			<img src="ghibli.png" alt="welcome Ghibli" />
			<p>이미지 이름</p>
		</React.Fragment>
	);
}

export default Welcome;

감싸는 태그 없이 <img>와 <p>태그만 있는 걸 볼 수 있다.

Fragment 축약

<></>태그는 <Fragment></Fragment>의 축약형이다.

<React.Fragment>
    <img src="ghibli.png" alt="welcome Ghibli" />
</React.Fragment>
/* ↑ 같은 거 ↓ */
<>
    <img src="ghibli.png" alt="welcome Ghibli" />
</>