React의 JSX 문법

JSX 문법

---

1. JSX란 무엇일까?

• javascript의 return문 안에서 html 태그같은 마크업을 넣어 UI 작업을 편하게 한다.
• JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시킨다.
• <div>~~</div>는 React 요소
  
  

React snippets 설치

2. JSX 불러오기

App.js에서 기본 형태 불러오기

• rfc

import React from 'react'

export default function App() {
  return (
    <div>App</div>
  )
}

• rfce

import React from 'react'

function App() {
  return (
    <div>App</div>
  )
}

export default App

3. JSX 문법 특징

(1) / 태그는 꼭 닫아주기

import React from 'react'

function App() {
  return (
    <div>
      <input type="text" />
    </div>
  )
}

export default App

(2) 무조건 1개의 엘리먼트 반환
모든 엘리먼트를 감싸는 하나의 최상위 태그가 있어야 함

(3) {} JSX에서 javascript 값 가져오기

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

• map, 삼항연산자 등 자바스크립트 문법도 사용 가능

import React from "react";

function App() {
  const number = 1;
  return (
    <div>
      <p>안녕하세요. 리액트입니다.</p>
      <p>
        {number > 10 ? number + "은 10보다 크다" : number + "은 10보다 작다"}
      </p>
    </div>
  );
}

export default App;

(4) class 대신 className
javascript와 달리 className으로 클래스네임 지정

(5) 객체로 style 주기
{color: 'orange', fontSize: '20px'} 라는 객체도 자바스크립트이므로 중괄호 안에 넣어준다.

• 인라인으로 style 주기

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

• 변수로 선언하여 style 주기

function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}