기존 컴포넌트
웹 페이지를 만들 때 웹 개발자가 컨텐츠를 마크업한 다음 JavaScript를 뿌려 상호작용을 추가했습니다. 이는 웹에서 상호작용이 중요했던 시절에 효과적이었습니다.
현재 컴포넌트
많은 사이트와 모든 앱에서 상호작용을 기대합니다.
리액트는 동일한 기술을 사용하면서도 상호작용 우선시합니다.
리액트 컴포넌트는 마크업으로 뿌릴 수 있는 JavaScript 함수입니다.
명시적으로 닫는 태그가 필요 없음을 의미합니다.
기본적으로 HTML은 여는 태그가 존재하면 닫는 태그가 존재 해야합니다.
하지만 JSX는 하위 노드들을 가지지 않는 태그들은 닫는 태그와 여는 태그의 구분이 필요없는 Self-Closing를 사용할 수 있습니다.
ex ) <br/>, <img/>, <hr/>, <input/>, <source/> 등
커스텀 컴포넌트 역시 하위 자식 요소가 존재하지 않는다면 Self-Closeing Tags를 사용합니다.
따라서 기본 HTML 요소인지 커스텀 컴포넌트인지 명확한 차이를 가져야합니다.
ex ) <header><header> vs <Header />