TIL - JSX

• javascript syntax Extension
• 자바스크립트와 html을 합쳐놓은 형태
• 마크업을 편리하게 작성하기 위한 문법
• jsx로 작성한 코드는 자바스크립트가 인식할 수 없는 문법이기에 Babel이라는 패키지를 이용해서 변환해줘야함

<div>Hello World</div> =>
React.createElement('div',null,"Hello World")

장점

• html tag를 그대로 사용하기 때문에 익숙함
• html 마크업과 javascript 로직을 같이 구현할 수 있음
• javascript문법을 이용해서 HTML을 생성할 수 있음
• vs DOM + Event

특징

• 하나의 부모태그
• 모든 태그가 셀프 클로징 가능
• camelCase Property
• javascript 동작 가능

function Login() {
	const notify = () => alert("Hello");
    
    return (
    	<h1
        onClick={notify}
        style={{ 
        	color: "red",
        }} 
        >
        	Login
        </h1> 
    ); // 첫번째 중괄호 : 자바스크립트를 이용하겠다 
		// 두번째 중괄호 : 객체
}

export default Login;