(1) JSX란 무엇인가?

<aside> 🔥 VSCode에서 src폴더 아래의 App.js 파일을 열어봅시다.

</aside>

자, App.js 코드를 뜯어보면서 jsx에 대해 알아봅시다!

// import [패키지명] from [경로] 이 형식으로 불러와요.
import React from 'react'; 
// js 파일 뿐 아니라 이미지도 가능가능!
import logo from './logo.svg';
// css? 가능!
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="<https://reactjs.org>"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

<aside> 👉 리액트에서는 딱 하나의 html 파일만 존재합니다. (public 폴더 아래에 있는 index.html)

</aside>

<aside> 👉 그럼 리액트에서 어떻게 뷰를 그릴까요? App.js 파일에서 보이듯, JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그립니다.

</aside>

• HTML을 품은 JS === JSX!

  아래 같은 HTML 태그는 .js 파일 안에서 쓸 수 없어요.

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

  그래서 나온 게 JSX입니다. 자바스크립트 안에서 html 태그같은 마크업을 넣어 뷰(UI) 작업을 편하게 할 수 있죠!

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

  <aside> ⚠️ 그럼 JSX에서 쓰는 <div>~~</div>는 DOM 요소인가요? 정확히는 React 요소예요! 차이가 뭐냐구요? 이건 다음주차에서 가상돔을 배우면서 조금 더 자세히 이야기해볼테니, 지금은 리액트 돔을 구성하는 건 리액트 요소! 돔을 구성하는 건 돔 요소! 라고만 알아둡시다.

  </aside>

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

  </aside>

(2) JSX 따라해보기

<aside> 🔥 개발자 도구 여는 법! 기억하고 계시죠? 개발자 도구를 열고 에러를 보는 거 잊지 마세요! (F12 혹은 Cmd +Opt + i , Ctrl + Shift + i를 눌러 개발자 도구를 열 수 있어요.)

</aside>

1. 태그는 꼭 닫아주기

App.js 파일에서 실습합니다! (오류를 내면서 해보는 거예요!)

하이라이트 된 부분은 지워주세요.

// input 태그를 닫지 않고 넣어볼거예요!
function App() {
  return (
    <div className="App">
      <input type='text'>
    </div>
  );
}

JSX 문법에 맞지 않는다고 에러가 납니다! 아래처럼 /를 추가하고 브라우저를 새로고침 해봅시다.

<input type='text'/>