10. JSX

• JSX 👉 리액트에서는 딱 하나의 html 파일만 존재합니다. (public 폴더 아래에 있는 index.html) 👉 그럼 리액트에서 어떻게 뷰를 그릴까요? App.js 파일에서 보이듯, **JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서** 그립니다. - HTML을 품은 JS === JSX! 아래 같은 HTML 태그는 .js 파일 안에서 쓸 수 없어요.

        <div>
        	<h1>안녕하세요!</h1> 
        	<p>시작이 반이다!</p>
        </div>

    그래서 나온 게 JSX입니다.
    자바스크립트 안에서 **html 태그같은 마크업**을 넣어 뷰(UI) 작업을 편하게 할 수 있죠! 
    
    ```jsx
    const start_half = <div>
        <h1>안녕하세요!</h1>
        <p>시작이 반이다!</p>
      </div>;
    ```
    
    <aside>
    ⚠️ **그럼 JSX에서 쓰는 <div>~~</div>는 DOM 요소인가요?**
    정확히는 React 요소예요! 차이가 뭐냐구요? 
    이건 다음주차에서 **가상돔**을 배우면서 조금 더 자세히 이야기해볼테니, 지금은 리액트 돔을 구성하는 건 **리액트 요소! 돔을 구성하는 건 돔 요소!** 라고만 알아둡시다.
    
    </aside>
    

<aside>
💡 어때요? 아직 아리송한가요?
괜찮아요! 써보면 느낌이 올거니까!

</aside>