함수의 리턴 값은 언제나 하나!
리액트에서 정의한 함수의 return 내에는 오직 하나의 최상위 태그만 존재해야 한다.
export default function Test (){
return(
<div>
<h1>Hello, world!</h1>
<h2>React <h2>
</div>
)
}
그래서 이렇게 의미가 없는 <div>로 감싸는 경우가 많다.
하지만 <div>로 감싸면 태그 자체는 사용하지 않지만 DOM에는 div가 적용된다.
따라서 이럴 때 사용할 수 있는 것이 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> 를 사용하면 된다.
'개발 공부 > React' 카테고리의 다른 글
input type='file' 동일 파일 재 선택 시 오류 (0) | 2023.03.22 |
---|---|
리액트 429 에러 해결(useEffect 무한루프) (1) | 2022.10.05 |
React #10 [PUT, DELETE] (0) | 2022.09.12 |
React #9 [json-server, REST API, custom hook] (0) | 2022.08.27 |
React #8 [json, 리액트 라우터] (0) | 2022.08.26 |