[ReactJS_Complete] <div> Soup

이 글은 [[한글자막] 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 생성

const Wrapper = (props) => {
    return props.children;
}
 
export default Wrapper;
 

return (
    <Wrapper>
        <h2 key="h2">Hi there!</h2>
        <p key="p">This does not work :-(</p>
    </Wrapper>
);
 

⭐ <div>를 따로 선언해주지 않았으므로 태그를 반환하지 않지만, Wrapper Component로 감싸주어 JSX 제약사항은 만족시킴

 

2. React.Fragment 사용(Wrapper component와 동일한 기능)

return (
    <React.Fragment>
        <h2 key="h2">Hi there!</h2>
        <p key="p">This does not work :-(</p>
    </React.Fragment>
);
 

+ 기능 지원 시, 축약형 사용 가능

return (
    <>
        <h2 key="h2">Hi there!</h2>
        <p key="p">This does not work :-(</p>
    </>
);
 

 

cf. <React.Fragment> 와 <Fragment>

import React, { useState } from 'react'; ▶ <React.Fragment> 사용 가능

import React, { useState, Fragment } from 'react'; ▶ <React.Fragment>, <Fragment> 사용 가능

 

 

 

참고 자료

⚛︎ <div> soup 방지하는 방법

 

<div> Soup 🥘 해결하기