[React] jsx의 div 늪에서 빠져나오는 방법

리엑트에서 제공하는 JSX문법은 자바스크립트에서도 html같은 코드를 쓸 수 있게 해주는 기능을 가지고 있음. 대신 조건이 있는데 바로 하나의 태그로 감싸야한다는 것이고, 이를 위해 보통 <div>로 감싸곤 함. 근데 컴포넌트가 많아지고 거대질수록 자칫하면 의미도 없는 <div>가 남발할 수 있음. 이걸 <div> soup라고 함.

 

이를 해결하기 위해서는 이러한 방법이 있음.

 

1. wrapper 컴포넌트 만들기

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

export default Wrapper;

그냥 Wrapper.js라는 파일을 만들어주고 위와 같이 씀. jsx가 아니기때문에 그냥 js파일임. 단순하게 props의 칠드런을 리턴하는데, 리엑트에서 말하는 props의 아이들이란 그 하위 내용들을 의미함. 그렇기때문에 저렇게 내보낸 친구를

 

 

이렇게 원하는 곳에 import를 한뒤 return문 최상단에 감싸주면 오류없이 잘 나옴. 이 방법의 특징은 이렇게 만든 <Wrapper>가 실제로 f12눌러서 html 트리를 보면 아무 감싸는 요소를 생성하지 않는다는 점임.

 

2. <> fragment 사용하기

아니면 더 쉽게 리엑트에서 제공하는 기본 요소를 사용해도 됨. 첫번째는 <>을 쓰기인데 그냥 진짜 <>을 쓰면 됨.

export default function Child() {
  return (
    <>
      <h1></h1>
      <p></p>
    </>
  );
}

프로젝트에 따라 예~~~전 리엑트 버전에서는 지원을 안하는데, 그런 문제가 있거나 그냥 저 모양새가 싫다면 아래 방법도 있음.

import React from "react";

export default function Child() {
  return (
    <React.Fragment>
      <h1></h1>
      <p></p>
    </React.Fragment>
  );
}