[React] JSX 뜻, 문법

 

 

   목차 

1. JSX 란?
2. JSX의 문법
- 닫힘 규칙
- 최상위 태그 규칙
- 스타일 규칙
- 자바스크립트의 값을 사용하기
- 주석

 

 

 

---

 

 

 JSX란? 

 

- 자바스크립트+HTML을 합쳐서 사용할 수 있는 문법

- 자바스크립트 표현식 (extension) 

- 변수나 함수 같은 값을 HTML에 쉽게 표현해서 사용할 수 있도록 고안된 문법

- 리액트에서는 JSX 문법을 사용해서 웹에 필요한 HTML요소를 만들어냄

- 얼핏보면 HTML 같이 생겼지만 실제로는 JavaScript이다.

 

function APP() {
return (
   <div className="App">
     <header className="App-header">
       <h2>안녕 리액트</h2>
     </header>
   </div>
 );
}

 

 

---

 

 

 JSX의 문법 

 

 

 (1) 닫힘 규칙 

 

태그는 꼭 닫혀 있어야하고, 닫지 않으면 오류가 발생한다. 

예컨대, <div> 태그를 열었으면 꼭, <div></div> 이렇게 닫아주어야 한다.

HTML 에서는 image, input 또는 br 태그를 사용 할 때 닫지 않고 사용하기도 하지만, 리액트에서는 그렇게 하면 안된다. 

 

아래 코드처럼 작성하면 오류가 발생한다.

import React from 'react';
import Hello from './Hello';

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

export default App;

 

 

 

 

 (2) 최상위 태그 규칙 

 

App.js에서 모든 태그를 감싸고 있는 가장 바깥에 있는 태그가 꼭 있어야한다. 

즉, JSX로 컴포넌트를 만들어서 return하려면 반드시 하나의 최상위 태그로 다른 모든 태그들을  묶어주어야한다.

 

만약 최상위 태그로 안묶고 싶다면, 아래와 같이 react.fragment 기능을 이용하면 된다.

import React from 'react'

 를 import 하고, 

function App() {
  return (
<React.Fragment>
      <Header />
      <h1> 안녕 </h1>
</React.Fragment>
);
}

 

이런식으로  <React.Fragment> 감싸준다.

아래와 같이 글자를 통째로 비워서 빈태그로 만들어도 된다.

function App() {
  return (
<>
      <Header />
      <h1> 안녕 </h1>
</>
);
}

 

 

 

 (3) 스타일 규칙 

 

JSX 에서 태그에 style 과 CSS class 를 설정하는 방법은 HTML 에서 설정하는 방법과 다르다.

우선, 인라인 스타일은 객체 형태로 작성을 해야 하며, background-color 처럼 - 로 구분되어 있는 이름들은 backgroundColor 처럼 camelCase 형태로 네이밍 해주어야 한다.

그리고, CSS class를 설정 할 때에는 class= 가 아닌 className= 으로 설정을 해주어야 한다. 

import React from 'react';
import Hello from './Hello';
import './App.css';


function App() {
  const name = 'react';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, // 기본 단위 px
    padding: '1rem' // 다른 단위 사용 시 문자열로 설정
  }

  return (
    <>
      <Hello />
      <div style={style}>{name}</div>
      <div className="gray-box"></div>
    </>
  );
}

export default App;

function App(){
const style = {
  App: {
    backgroundColor: "black".
  },
  h2: {
    color: "red",
  }, 
  bold_text: {
    color: "green",
  },
 };
 
 return {
  <div style={style.App}>
   <h2 style={style.h2}>안녕 리액트</h2> 
   <b style={style.bold_text} id="bold_text">
    React.js
   </b>
  </div>
 );
}

 

 

 

 (4) 자바스크립트의 값을 사용하기 

 

조건부 렌더링 예시

function App(){
const number = 5;

 return {
  <div style={style.App}>
   <h2 style={style.h2}>안녕 리액트</h2> 
   <b style={style.bold_text} id="bold_text">
     {number}는 : {number % 2 === 0 ? "짝수" : "홀수"} // 홀수로 렌더링 됨
   </b>
  </div>
 );
}

 

 

 

 (5) 주석 

 

JSX 내부의 주석은 {/* 이런 형태로 */} 작성한다.

import React from 'react';
import Hello from './Hello';
import './App.css';


function App() {
  const name = 'react';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, // 기본 단위 px
    padding: '1rem' // 다른 단위 사용 시 문자열로 설정
  }

  return (
    <>
      {/* 주석은 화면에 보이지 않습니다 */}
      /* 중괄호로 감싸지 않으면 화면에 보입니다 */
      <Hello 
      />
      <div style={style}>{name}</div>
      <div className="gray-box"></div>
    </>
  );
}

export default App;

 

추가적으로, 열리는 태그 내부에서는 // 이런 형태로도 주석 작성이 가능하다.

import React from 'react';
import Hello from './Hello';
import './App.css';


function App() {
  const name = 'react';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, // 기본 단위 px
    padding: '1rem' // 다른 단위 사용 시 문자열로 설정
  }

  return (
    <>
      {/* 주석은 화면에 보이지 않는다 */}
      /* 중괄호로 감싸지 않으면 화면에 보인다 */
      <Hello 
        // 열리는 태그 내부에서는 이렇게 주석을 작성 할 수 있다.
      />
      <div style={style}>{name}</div>
      <div className="gray-box"></div>
    </>
  );
}

export default App;

 

 

 

 

 

참고 자료 

인프런 - 한입 크기로 잘라 먹는 리액트

https://react.vlpt.us/basic/04-jsx.html