[React] JSX

Javascript Syntax Extension

자바스크립트와 html을 합쳐놓은 듯한 형태

마크업을 편리하게 작성하기 위한 문법

JSX로 작성한 코드는 자바스크립트가 인식할 수 없는 문법이기에 Babel이라는 패키지를 이용해서 변환해줘야 함

JSX의 장점

1. HTML tag를 그대로 사용하기 때문에 익숙하다.
2. HTML 마크업과 Javascript 로직을 같이 구현할 수 있다.
3. Javascript 문법을 이용해서 HTML을 생성할 수 있다.(별도의 HTML파일 필요없게 됨)

JSX의 특징

1. 하나의 부모태그
   ➡ 모든 JSX 태그는 하나의 부모 태그로 감싸져 있어야 한다.

2. React의 함수형 컴포넌트 안에서는 return문 안에 작성한다

   function Login(){
   	return(
         <>
       	<h1>Login</h1>
         	<div>Main</div>
         </>
       )
   };
   //모든 태그는 하나의 부모 태그로 감싸져야 하니깐 형제 요소가 생기면 같이 부모로 감싼다.
   //이때 JSX는 div의 남용을 방지하기 위해 fragments를 제공한다.```

2. 모든 태그가 셀프 클로징 가능
   ➡ <div /> 태그 안에 내용이 없다면 가능

3. camelCase Property
   ➡ <h1 className="title"> 속성의 이름을 카멜케이스로 작성해야 한다.

4. Javascript 동작 가능

   function Login(){
   	const notify = ()=> alert("Hello")
         return(
         	<h1 onClick={notify} style={{color : blue}}>Login</h1>
         )
       };
   	//자바스크립트 문법을 사용할 때는 중괄호 안에 변수를 작성한다.
   	//style 적용도 마찬가지. 객체의 형태롤 표현하고 중괄호로 한 번 더 묶어준다.