React | JSX 문법의 특징

JSX
JSX 문법의 특징 및 준수사항

---

JSX

const element = <h1>Hello, world!</h1>;

리액트에서는 JSX라는 독특한 문법을 가지고 있습니다. JSX는 자바스크립트와 HTML을 동시에 사용하며, HTML에 자바스크립트의 변수들을 바로 사용할 수 있는 일종의 템플릿 언어입니다. 

 

JSX 문법의 특징 

1. 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나가 감싸는 형태여야 합니다.

리액트가 사용하는 Virtual DOM 방식에서는 컴포넌트 변화를 감지할 때 효율적으로 비교하고자 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문입니다.

import React from 'react';

function App(){
    return(
    	<>
        	<h1>header1</h1>
        	<h2>header2</h2>
        </>
    )
}

 

2. 변수의 값을 {변수명} 과 같이 넣어 렌더링 합니다.

import React from 'react';

function App(){
	const name = 'name';
    return(
    	<>
        	<h1>{name}</h1>
        	<h2>header2</h2>
        </>
    )
}

 

3. JSX 내부의 자바스크립트 표현식 내에서 if문을 사용할 수 없어서, 조건부 연산자(삼항 연산자)를 사용합니다.

import React from 'react';

function App() {
    const name = '리액트';
  return (
   <div>
          {name === '리액트'? (
          	<h1>리액트</h1>
          ) : (
          	<h2>리액트가 아님</h2>
          )}
      
   </div>
      
  );
}

4. 기존에 HTML에서 스타일을 지정할 때 background-color 와 같이 - 문자가 포함된 이름들을, JSX에서 사용할 때에는 -를 없애고 카멜 표기법으로 작성해야 합니다.

import React from 'react';

function App() {
  const style = {
      backgroundColor: 'white',
      fontSize: '10px',
      fontWeight: 'bold'
  }
  return (
  	<div style={style}>테스트</div>
  )
}

 

5. div에 class 속성을 설정할때 className으로 설정해주어야 합니다.

import React from 'react';

function App(){
	const name = 'name';
    return(
    	<>
        	<h1 className="colorRed">header1</h1>
        	<h2 className="colorBlue">header2</h2>
        </>
    )
}

 

6. HTML 상에서 닫힌 태그가 없던 태그들도 모두 닫힌 태그를 사용해주어야 합니다.

<input></input>

<input />