리액트 프래그먼트 <React.fragment>

리턴되는 모든 태그들은 하나의 최상위 태그로 감싸져야한다. - React -

 

라는 리액트의 규칙 때문에 나는 의미없는 <div>로 감싸기 급급했다.

 

하지만, HTML이 많아지면 많아진만큼 앱이 느려진다. 라는 것은 너무 당연지사..

 

또한 <div>라는 흑마법을 너무 자주 쓰이니, 그만큼 css의 작업량도 생겨난다. 

지금까지 만들어본 프로젝트 중에서 컴포넌트가 20개이상은 드물었지만, 이게 1000개가 된다면 css의 작업량은 더 많이 생길 것이다.

그러면 유지보수 또한 힘들어질 것이고, 늘어난 양만큼 앱은 미세하겠지만 느려질것이다.

 

 

그래서 '불필요한 내용을 렌더링하는 것은 일반적으로 프로그래밍에서 좋은 생각이 아니다.'  라는 결론을 내리게 되었다. 

 

지금부터 습관을 바로 잡아야한다.

 

그래서 나는 해결방법으로 프래그먼트를 찾게 되었다.

 

사용법

<React.Fragment>
	<h1>안녕 디지몬</h1>
</React.Fragment>

 

그냥 간단하게 React.Fragment를 없애고 <>

<>
	<h1>안녕 디지몬</h1>
</>

 

! 단 주의할 점은 map을 돌릴때 key값을 넣어준다고 한다면 React.Fragment라고 작성해주기

 

장점

1. 불필요한 div를 사용하지 않아도 된다.

2. css가 망가질 걱정을 하지 않아도 된다.

3. 유지보수성이 더 높아진다.

 

등 안 쓸 이유가 없다.