이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다.
⚛️ 기본 환경: IDE: VS code, Language: React
JSX에서 return 값은 1개만 가능하므로 여러 요소들이 return될 때, 1개의 tag로 감싸거나 배열을 선언해야 함(참고)
⭐ 배열 선언보다는 <div>를 통해서 1개의 return값을 만듦
🚨 JSX 요구사항에 따른 다수의 <div> 선언에 따른 불필요한 <div> 생성
▶ tag styling에 좋지 않
▶ 다수의 html 요소 rendering에 따른 페이지 로딩 속도 저하
<div> Soup 해결 방법
1. Wrapper.js 생성
|
1
2
3
4
5
6
|
const Wrapper = (props) => {
return props.children;
}
export default Wrapper;
|
cs |
|
1
2
3
4
5
6
7
|
return (
<Wrapper>
<h2 key="h2">Hi there!</h2>
<p key="p">This does not work :-(</p>
</Wrapper>
);
|
cs |
⭐ <div>를 따로 선언해주지 않았으므로 태그를 반환하지 않지만, Wrapper Component로 감싸주어 JSX 제약사항은 만족시킴
2. React.Fragment 사용(Wrapper component와 동일한 기능)
|
1
2
3
4
5
6
7
|
return (
<React.Fragment>
<h2 key="h2">Hi there!</h2>
<p key="p">This does not work :-(</p>
</React.Fragment>
);
|
cs |
+ 기능 지원 시, 축약형 사용 가능
|
1
2
3
4
5
6
7
|
return (
<>
<h2 key="h2">Hi there!</h2>
<p key="p">This does not work :-(</p>
</>
);
|
cs |
cf. <React.Fragment> 와 <Fragment>
import React, { useState } from 'react'; ▶ <React.Fragment> 사용 가능
import React, { useState, Fragment } from 'react'; ▶ <React.Fragment>, <Fragment> 사용 가능
참고 자료
⚛︎ <div> soup 방지하는 방법
루트 jsx 요소는 1개여야만 한다.jsx가 js로 변환하면서 값 하나만 반환 가능하기 때문이다.그래서 인접한 요소들을 <div>로 감싸게 되는데, 불필요한 div요소가 중첩되어 <div> soup이 발생한다.wrapper
velog.io
<div> Soup 🥘 해결하기
div soup를 해결하는 세가지 방법에 대해서 다룹니다.
velog.io
'JavaScript > React' 카테고리의 다른 글
| [ReactJS_Complete] React.useRef() (0) | 2023.06.01 |
|---|---|
| [ReactJS_Complete] ReactDOM.createPortal() (0) | 2023.06.01 |
| [ReactJS_Complete] JSX Limitations & Workarounds (0) | 2023.06.01 |
| [ReactJS_Complete] Conditional Styling (0) | 2023.06.01 |
| [ReactJS_Complete] For ... in or of (0) | 2023.05.31 |
