React 문법 : JSX (JavaScript XML)

 

 

import React from 'react';

function Hello() {
  return <div>안녕하세요</div>
}

export default Hello;

return 뒤에 작성된 부분이 마치 HTML 처럼 생겼지만

이는 JSX 문법이라고 할 수 있다.

 

JSX란?

자바스크립트 문법을 확장하여 UI가 어떻게 보일지 정의하는 문법이다.

리액트 컴포넌트 파일에서 XML 형태로 코드를 작성하면, Babel이 JSX 문법을 JavaScript로 변환해준다.

하지만, JSX가 제대로 자바스크립트로 변환이 되려면 지켜야하는 규칙들이 있다.

 

 

JSX 규칙

 

1. 태그는 닫혀있어야 한다.

 

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

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

export default App;

- return 뒤에 2개 이상의 태그는 항상 하나의 태그로 감싸줘야한다.

- 단순히 감싸기 위한 용도로는 이름 없는 태그로 작성해주면 Fragment가 생성되어 별도의 요소로 나타나지 않는다.

 

 

2. 자바스크립트 값 및 표현식을 사용할 때는 중괄호 { } 로 감싼다.

 

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

function App() {
  const name = 'subin';
  const Welcome = (item) => {
    return 'WELCOME TO ' + item
  };
  
  return (
    <>
      <Hello />
      <div>{name}</div>
      <div>
        {Welcome('React')}
      </div>
    </>
  );
}

export default App;

- 자바스크립트 값:

함수형 컴포넌트인 경우 return 이전에 변수 선언하고,   return 내부에 { 변수 } 와 같이 사용한다.

- 자바스크립트 표현식:

{표현식} 과 같이 사용한다.

 

 

3. inline style CSS는 객체 형태로 작성

 

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

function App() {
  const name = 'subin';
  const style = {
    backgroundColor: 'red',
    fontSize: '2vw', 
    padding: 10
  }

  return (
    <>
      <Hello />
      <div style={style}>{name}</div>
    </>
  );
}

export default App;

 

- 인라인 스타일 CSS는 객체 형태로 코드를 작성해야한다.

- background-color 처럼 하이픈으로 구분되어 있는 스타일들은

  backgroundColor 와 같이 camelCase형태로 이름을 작성해야한다.

- 폰트 사이즈나 패딩 값 등 기본단위는 px이고 숫자만 작성해줘도 된다.

- 하지만 다른 단위를 사용할 경우에는 문자열로 작성해줘야 한다.

 

 

4. class 설정은 className으로 작성

 

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

function App() {
  const name = 'subin';
  return (
    <>
      <Hello />
      <div className="redBox">{name}</div>
    </>
  );
}

export default App;

 

 

5. 주석 작성

 

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

function App() {
  const name = 'subin';
  return (
    <>
      {/* 보이지 않는다 */}
      /* 보인다 */
      <Hello 
        // 보이지 않는다
      />
      <div style={style}>{name}</div>
      <div className="gray-box"></div>
    </>
  );
}

export default App;

 

 

6. null, false, undefined를 렌더링하는 경우

 

이를 컴포넌트에서 사용한다면 웹페이지에 아무것도 나타나지 않는다.

 

 

7. 이벤트는 camelCase로 작성하고 타겟에 등록 시 함수명만 적는다.

 

HTML에서 타겟에 인라인으로 자바스크립트 이벤트를 등록할 때는 onclick="함수명()" 과 같이 작성했다.

<input type="button" onclick="btnClick();" />

<script>
function btnClick() {
	alert("버튼이 눌렸습니다");
}
</script>

 

하지만 JSX에서 이벤트를 등록할 때는 onClick={함수명} 과 같이 작성한다.

import React, { useState } from 'react';

function Counter() {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(preNum => preNum + 1);
  }

  const onDecrease = () => {
    setNumber(preNum => preNum - 1);
  }

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;