[ 스파르타 / TIL ] 내일배움캠프 #34

오늘 한 것

---

• 알고리즘 문제 풀기
• 리액트 강의 보기

 

 

오늘의 배움

---

<div> soup란?

---

인접한 요소들을 <div>로 감싸게 되는데, 불필요한 div요소가 중첩되어 <div> soup이 발생한다.

 

 

<div> soup에 빠지지 않기 위한 방법

---

아래와 같이 <React.Fragment>는 빈 wrapper 컴포넌트다. HTML 테그가 DOM에 렌더링 되지 않으면서 코드가 실행된다.

return (
	<React.Fragment>
		<h1>Hello World!</h1>
		<p>This works👍</p>
	</React.Fragment>
};

 

만약 아래와 같이 Import Fragment를 했다면 React를 붙이지 않아도 <Fragment> 태그만으로도 사용이 가능해진다. 

import {Fragment} from 'react';

return (
	<Fragment>
		<h1>Hello World!</h1>
		<p>This works👍</p>
	</Fragment>
};

 

아래와 같이 사용할 수도 있지만 버전에 따라 사용할 수 없을 수도 있다. 하지만 위의 <React.Frament>는 모든 버전에서 사용이 가능하다. 

return (
	<>
		<h1>Hello World!</h1>
		<p>This works👍</p>
	</>
};