"알겠습니다! 저한테 맡겨주세요!" 헬리오스 탑은 리액트로 만들어졌습니다. 리액트는 UI를 구성하는 최소 단위인 컴포넌트들로 구성되어 있습니다.이때 각각의 리액트 컴포넌트는 여러 요소를 그대로 반환할 수 없으며, 그렇기에 하나의 부모 요소로 묶어주어야 합니다.예시를 살펴봅시다. 위와 같이 여러개의 JSX 요소를 그대로 반환하려고 하면,리액트는 하나의 부모 요소가 필요하다는 오류를 발생시킵니다. 태그를 사용해 부모 요소로 묶어주었더니,더 이상 오류가 발생하지 않습니다.이제 HeliosTower.tsx 컴포넌트를 App.tsx에서 불러오면,화면에 정상적으로 출력되는 것을 확인할 수 있습니다. 앗, 그런데 누군가 부모 태그에 css를 추가하는 장난을 쳐놨습니다. 태그에 빨간색 배경을 입혀서, 탑이 ..
