JSX란?

컴포넌트의 생김새를 정의할 때 사용하는 문법으로
코드의 생김새는 HTML과 유사하지만 JS 입니다
babel(https://babeljs.io/)이라는 도구를 활용하여 JSX 코드가 JS가 됩니다!

SelfClosingTag

HTML에서는 Empty Tag라고 하여 닫아주는 태그가 따로 없이
단독으로 사용하는 태그라고 볼 수 있습니다!
원래 SlefClosingTag는 XHTML에서 사용하는 문법이였는데요!
HTML5에서는 선택사항이지만 React에서는 필수 사항으로
최대한 태그는 닫아주는것을 권장합니다!

1. 기본적인 태그, 열고 닫음 태그가 있습니다!

<div></div>

2. Empty 태그, 만 사용하며 닫음 태그가 없습니다!

<img src='imgSrc' alt='alternate'>
<meta charset='UTF-8'>

3. SelfClosingTag, 로 자체적으로 태그를 닫아 줍니다!

<img src='imgSrc' alt='alternate' />
<App />
<Hello />

Fragments Tag

이제 저희는 return 안에 다양한 컴포넌트를 작성할것인데요!
제가 return에서 두 줄 이상 사용시 ()로 묶어주는것을 추천 드렸는데요!
()는 딱히 큰 의미는 없고 가독성을 높이기 위한거구요!
실제로 React에서는 두개 이상의 태그를 사용할 때는
태그를 묶어주는 태그가 있어야 합니다!

return(
	<div>
    	<Hello />
        <Hello />
    </div>
);

묶어 줄 때는 결정 된 태그는 없기 때문에 내가 원하는 태그를 작성해주셔도 됩니다!
하지만 아무래도 스타일을 줄 경우도 있고 특별히 의미가 없이 단순히 묶기 때문에
다른 태그를 사용하고 싶다면 Pregments Tag를 사용해주시면 좋아요!
오히려 React Docs에서도 추천, 권장하는 사항이니 이 부분도 신경쓰면 좋겠네요!

return (
	<React.Fragment>
    	<Hello />
        <Hello />
	</React.Fragment>
);

return (
	<>
    	<Hello />
        <Hello />
	</>
);

위에 처럼 두가지 방법이 있는데요!
어떤 방법을 사용하셔도 되세요!
저는 작성하기는게 귀찮아서 밑에 단축방법을 주로 사용합니다!

JSX 문법 내부에 JS 코드 작성 방법

크게 어렵지는 않아요!
return() 내부에서는 const, for 등의 JS 문법을 사용할 수가 없는데요!
어!? JSX는 JS라고 했는데 왜 사용이 안되냐라고 생각할 수 있는데요!
JSP, PHP 등의 경우에도 태그 코드 내에서는 언어를 사용하는게 안되죠!
그렇기에 중간에 넣는 방법도 다양한데요!
JSX에서 JS 코드를 작성하는 방법은 { JS CODE }로 중괄호를 사용하면 됩니다!

const name = 'react';

return(
	<>
		<div> { name } </div>
	</>

ClassName

저희는 HTML 태그에서는 흔히 class를 사용하여 선택자를 구성하는데요!
React에서는 class가 아닌 className을 사용하여 이름을 붙여 주시면 됩니다!
class를 사용해도 안되는건 아니지만 오류가 나기 때문에 className을 사용해주세요!
이건 권장사항이 아닌 필수 사항이라고 보시면 됩니다!

return(
	<>
		<div className = 'name'> { name } </div>
	</>

Style 적용

React에서는 스타일을 적용하는 방법은 약 3가지 정도 입니다!
1. CSS file을 만들어서 import 해주는 방법

import 'App.css';

2. style 객체를 만들어서 적용하는 방법

const styles = {
	backgroundColor : 'black',
    color : 'red',
    fontSize : 24,
    padding : '1rem',
}

<div style={styles}></div>

객체로 만들어 사용할 때는 properties를 카멜 기법으로 사용해주세요!
그리고 style attribute에 {}를 사용하여 작성한 객체를 넣어주시면 됩니다!

3. inline 으로 적용하는 방법

<div style={{
	backgroundColor : 'black',
    color : 'red',
    fontSize : 24,
    padding : '1rem',
}}></div>

inline 방식으로 작성할 때는 style에 {{}}이렇게 작성을 해주셔야 되는데요!
{}만 사용해도 되지 않냐라고 생각하실 텐데요!
style은 제가 객체로 만들어야 된다고 말씀드렸잖아요!
내부 {}는 객체를 뜻하는 중괄호 이구요!
외부 {}는 JS 코드를 작성하겠다는 표기 입니다!