스파르타 코딩클럽 - 리액트 1주차(5)

1. JSX란?

JSX란 JavaScript를 확장한 문법이다. UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장한다. JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있다.

// 엇? 파이썬에서 뷰티풀스프를 불러올 때 본 것 같기도 하죠?
// *react*에서도 다른 패키지를 불러다 쓸 수 있습니다!
// 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;

React는 위와 같은 구조로 설정되어 있다.

• JSX

  리액트에서는 딱 하나의 HTML 파일만 존재한다.
  (public 폴더 아래에 있는 index.html)