[React] 리액트 JSX 문법 컴포넌트 표현하기

1. JSX란?

JSX는 자바스크립트에 XML을 추가한 확장형 문법으로 리액트 요소를 만들 수 있게 해줍니다. JSX를 이용하면 보다 더 간단한 코드로 우리가 원하는 화면을 보여줄 수 있게 됩니다.

2. JSX 문법의 특징

① 태그는 무조건 닫혀야 한다.

• <div>, <p>, <a> 와 같이 짝이 있는 태그라면 반드시 닫는 태그와 함께 사용하여야한다.
• 단독으로 쓰이는 태그의 경우에도 반드시 태그를 닫아줘야 한다.

② 렌더링 될 루트 요소는 하나만 존재해야하기 때문에 두개 이상의 요소는 하나의 요소로 감싸져야한다.

import React from 'react';

function App() {
    return (
        <div>
            <div>
                Hello
            </div>
            <div>
                Hello Jieun
            </div>
        </div>
    )

export default App;

③ 자바스크립트 표현식 사용

• JSX 내부에서는 변수를 사용하려면 중괄호를 사용하여 표현한다.

import React from 'react';

function App() {
    const name = "JIEUN"
    return (
        <div>
            <div>
                Hello
            </div>
            <div>
                <p>Hello {name}</p>
            </div>
        </div>
    )

export default App;

④ if 문 대신에 삼항연산자(조건부 연산자)를 사용한다.

⑤ 카멜케이스 표기법을 사용한다.

• background-color (X) / backgroundColor (O)

⑥ class 대신 className을 사용한다.

import React from 'react';

function App() {
    const name = "JIEUN"
    return (
        <div className="App">
            <div>
                Hello
            </div>
            <div>
                <p>Hello {name}</p>
            </div>
        </div>
    )

export default App;