<div/> soup

🥊 jsx의 한계

루트 jsx 요소는 1개여야만 한다.
jsx가 js로 변환하면서 값 하나만 반환 가능하기 때문이다.
그래서 인접한 요소들을 <div>로 감싸게 되는데, 불필요한 div요소가 중첩되어 <div> soup이 발생한다.

return (
  <div>
  	<div>
      <div>
    ...
      </div>
    </div>
  </div>
);

해결 방법 1) Wrapper 요소를 적용한다.

내부에서 작동하는 요소를 눈으로 볼 수 있는 방식

// Wrapper.js
const Wrapper = props => {
  return props.children;
};
export default Wrapper;

// 실제 사용하는 코드
import Wrapper from './Helpers/Wrapper'
...
return (
  ✅<Wrapper>
    ...
  </Wrapper>
);
...

해결 방법 2) react 내장된 컴포넌트를 적용한다.

return (
	<React.Fragment> 
	...
	</React.Fragment> 
);

//혹은

return (
	<Fragment> 
	...
	</Fragment> 
);

//혹은

return (
	<> 
	...
	</> 
);

출처: Udemy - React 완벽 가이드 with Redux, Next.js, TypeScript