[React] JSX란??

JSX는 JavaScript XML의 약자로 JavaScript를 확장한 문법입니다.

JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있습니다.

자바스크립트에서 HTML을 작성하듯이 비슷하게 작성할 수 있도록 해 주는 것이 JSX의 가장 큰 장점입니다.

위의 두 예제는 동일한 결과를 만듭니다.

JSX 또한 표현식이다

컴파일이 끝나면, JSX 표현식이 정규 자바스크립트 함수 호출이 되고 자바스크립트 객체로 인식됩니다.

이 말은 if 문이나 for 반복 내에서 JSX를 사용할 수 있으며, 변수에 할당하거나 매개 변수로 전달하거나 함수에서 반환할 수 있음을 의미합니다.

JSX 속성 정의

속성에 따옴표를 이용해 문자열 리터럴을 정의할 수 있습니다.

const element = <div tabIndex="0"></div>;

속성에 중괄호를 이용해 자바스크립트 표현식을 포함시킬 수 있습니다.

const element = <img src={user.avatarUrl}></img>;

!!!
JSX는 HTML보다는 자바스크립트에 가깝기 때문에, React DOM은 HTML 속성 이름 대신 camelCase 속성 이름 컨벤션을 사용합니다.

예를 들어, JSX에서 class 는 className 이 되며, tabindex 는 tabIndex 가 됩니다.

사용자 정의 컴포넌트는 반드시 대문자로 시작해야합니다

Element가 소문자로 시작하는 경우에는