React - Fragment 사용하기

함수의 리턴 값은 언제나 하나!

리액트에서 정의한 함수의 return 내에는 오직 하나의 최상위 태그만 존재해야 한다.

export default function Test (){
	return(
    	<div>
        	<h1>Hello, world!</h1>
            <h2>React <h2>
        </div>
    )
}

그래서 이렇게 의미가 없는 <div>로 감싸는 경우가 많다.

 

하지만 <div>로 감싸면 태그 자체는 사용하지 않지만 DOM에는 div가 적용된다.

DOM 적용 예시

 

따라서 이럴 때 사용할 수 있는 것이 Fragment이다.

 

 

 

 

Fragment 사용하기

 

import React, { Fragment } from 'react';

export default function Test (){
	return(
    	<Fragment>
        	<h1>Hello, world!</h1>
            <h2>React <h2>
        </Fragment>
    )
}

이렇게 <div>가 아닌 <Fragment>를 사용하는 경우 DOM에 영향을 미치지 않는다! 

 

 

 

그리고 이러한 <Fragment>는 <>로 축약이 가능하다.

import React from 'react';

export default function Test (){
	return(
    	<>
        	<h1>Hello, world!</h1>
            <h2>React <h2>
        </>
    )
}

마치 빈 태그처럼 보이지만 Fragment 로 취급되고 import를 따로 하지 않아도 된다.

따라서 DOM에 영향을 미치는 <div>보다 <>를 사용하는 것이 더 효율적일 것 같다.

 

 

 

 

Fragment 축약 사용의 단점

Fragment 축약의 단점은 key 값을 설정할 수 없다는 것이다. 따라서 key 값을 설정하려면 <>가 아니라 <Fragment> 를 사용하면 된다.