110. JSX 제한 사항 및 해결 방법

JSX는 컴포넌트에서 반환하는 코드입니다

리액트는 이 코드를 실제 DOM으로

렌더링합니다

 

이것이 바로 JSX입니다

 

JSX의 한계는 이렇게 루트 JSX 요소에는 하나의 요소만 반환해야 하는 한계가 있다.

 

 

 

이를 해결하는 방법으로 div로 감싸는 해결방법이 있었는데 div 대신 네이티브 자바스크립트 배열을 사용할 수도 있다

하지만 이 경우에도 배열은 key 값을 필요로 하게 된다

 

이러한 문제들 때문에 사실 의미가 없는 구조적인 의미조차 갖지 않는 div 태그들이 많이 존재할 수 있다

 

지금은 괜찮지만 나중에는 css 스타일링을 망칠 수도 있다

스타일링에 지장을 주지 않더라도 좋은 관행은 아니다

너무 많은 HTML 요소를 렌더링하게 되면 궁극적으로는 어플리케이션이 느려질 것이다

브라우저는 모든 요소들을 렌더링해야 하고 그러면 리액트는 모든 요소 또는 최소한 몇 개의 요소들은 확인해야 한다

따라서 불필요한 요소들을 렌더링하는 것은 프로그래밍에서 좋은 생각이 아니다