[React] JSX 문법

JSX란 React에서 컴포넌트의 생김새를 정의할 때 사용하는 문법이다. 보기에는 HTML처럼 생겼지만 실제로는 Javascript다. 바벨이라는 도구를 사용하여 XML 형태의 코드가 Javascript로 변환이 된다. 변환되는 것을 확인하기 위하여 babeljs.io에 접속하여 아래 코드를 입력해 본다. bable 변환 결과 위 이미지의 네모 안의 createElement 함수가 컴포넌트를 만들어준다. 즉 컴포넌트를 우측 방식대로 계속 선언하는 것은 어려움이 있으니 JSX를 문법을 사용하여 XML형태로 사용하면 이것을 Javscript 형태로 변환하게끔 해주는 것이 바벨이라는 도구다. JSX 문법을 정확하게 Javascript 문법으로 변환하기 위해서는 지켜야 할 규칙들이 있다. - 태그는 무조건 닫혀야 된다. (닫히는 태그가 없으면 에러가 발생한다) 간혹 HTML에서 INPUT이나 BR 태그는 닫지 않고 사용하는 경우가 있지만 리액트에서는 무조건 닫아줘야 한다. 태그를 닫지 않았...

원문링크 : [React] JSX 문법