JSX?

리엑트는 빈껍데기 html 딱 한개지만 src폴더안의 App.js파일을 보면 function App 같은 함수 안에서 return 해주는 html태그 처럼 생긴 애들을 가지고 뷰를 꾸민다.
이러한 방식을 HTML in JS 라고 불린다.
그리고 이걸 우리는 JSX라고 부르며 리엑트에서 사용하는 문법을 가리킨다.

SPA (Single Page Aplication)

우리는 이제 리엑트를 만들때 빈 껍데기 html은 한개를 가지고
여러가지 함수형 컴포넌트를 만들어서 비어있는 html에 올려서 페이지를 구성해줄 것이다. 이것을 SPA라고 부른다.

JSX

리엑트에는 단 하나의 html 파일만 존재한다.(public 폴더 아래에 있는 index.html)
그렇다면 리엑트에서 뷰를 어떻게 그릴까?
JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그린다.
예를 들어보자

<div>
	<h1>안녕하세요!</h1>
    	<p>저는 이제 막 프로그래밍을 공부하기 시작했습니다.<P>
</div>

위와 같은 html태그는 .js파일 안에서 쓸 수 없다.
그래서 나온게 JSX이다
자바스크립트 안에서 html 태그같은 마크업을 넣어 뷰(UI) 작업을 편하게 할 수 있다.

JSX 규칙

1. 태그는 꼭 닫아줘야 한다.

html에서는 닫는 태그가 없는 input, span등을 사용할때도 태그는 꼭 닫아야 한다.
만약 닫을 필요가 없다면 태그 끝에 /를 추가해보자.
그럼 닫는 태그가 없어도 JSX문법에 어긋나지 않는다. <input />

2. 무조건 1개의 엘리먼트를 반환해야한다.

클래스형 컴포넌트는 render 함수 안에서 return,
함수형 컴포넌트는 App 함수 안에서의 return 을 통해 반드시 1개의 엘리먼트를 반환해야 한다.

return (
      <div className="App">
        
      </div>
)

3. React에서 javascript의 값, map, 삼항연산자 등의 자바스크립트 문법을 JSX안에 쓸 때 {}를 통해 가져올 수 있다.

<MyList list={this.state.list} />
혹은
<p>{number > 10? number + '은 10보다 크다' : number + '은 10보다 작다'}</p>

4. css를 주기위해 html에서는 class를 썼다면 JSX에서는 className을 사용한다.

<div className='App'>

5. 인라인으로 style 줄때.

html

<p style="color: orange; font-size: 20px;">orage</p>

JSX

<p style={{color: 'orange', fontSize: '20px'}}>orange</p>

혹은 이렇게 하나의 변수로 빼서 넣을 수도 있다.

function App() {
	const styles = { color: 'orange', fontSize: '20px'
};
	return (
		<div className="App">
			<p style={styles}>orange</p> 
        </div>
); }