06. JSX 문법

JSX란?

HTML을 품은 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;

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

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

JSX 이렇게 써라!

1. 태그는 꼭 닫아주기

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

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

<input type='text'/>

태그는 꼭 닫아줘야 함!!!!!

2. 무조건 1개의 엘리먼트를 반환하기

return (
    <p>안녕하세요! 리액트 반입니다 :)</p>

    <div className="App">
      <input type='text'/>
    </div>
  );

최상위 엘리먼트가 P와 div태그 두개임
SyntaxError: /Users/apple/week-1/src/App.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (13:4)

  11 |     <p>안녕하세요! 리액트 반입니다 :)</p>
  12 |
> 13 |     <div className="App">
     |     ^
  14 |       <input type='text'/>
  15 |     </div>
  16 |   );

최종으로 감싸주는 div태그를 만들어주기

return (
    <div className="App">
      <p>안녕하세요! 리액트 반입니다 :)</p>
      <input type='text'/>
    </div>
  );

3. JSX에서 javascript 값을 가져올 때 중괄호 쓰기

	const cat_name = 'perl';
// return 부분만 복사해서 붙여넣고 크롬 브라우저로 돌아가 새로고침 해봅시다.
    return (
      <div>
        hello cat_name!
      </div>
    );

변수를 불러오지 못하고 글자로 표시됨.

	const cat_name = 'perl';
	return (
      <div>
        hello {cat_name}!
      </div>
    );

변수 부분을 중괄호로 감싸주기

삼항 연산자 사용해보기

function App() {
  const number = 1;

  return (
    <div className="App">
      <p>안녕하세요! 리액트 반입니다 :)</p>
      {/* JSX 내에서 코드 주석은 이렇게 씁니다 :) */}
      {/* 삼항 연산자를 사용했어요 */}
      <p>{number > 10 ? number+'은 10보다 크다': number+'은 10보다 작다'}</p>
    </div>
  );
}

4. class 대신 className 쓰기

<div className="App">

JSX로 작성하는 태그 내에서 클래스 명을 정해줄 땐 속성 값을 className으로 사용합니다
id는 똑같다.

인라인으로 style 줄 땐 json 문법으로!

HTML

<p style="color: orange; font-size: 20px;">orange</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>
  );
}