React JSX 란? / JSX 문법

JSX란?

JSX는 자바스크립트의 확장 문법이다. XML과 매우 비슷하게 생겼으며, 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

 

JSX 문법 규칙

1. 감싸인 요소

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야함.

 

잘못된 코드 예시

function App(){
	return(
    	<h1>Hello</h1>
        <h2>Is it working well?</h2>
    )
}

 

올바른 코드 예시

function App(){
	return(
    	<div>
          <h1>Hello</h1>
          <h2>Is it working well?</h2>
        </div>
    )
}

 

div 요소를 사용하고 싶지 않을 때 Fragment 사용 가능

// react 모듈에 들어있는 Fragment import
import React, {Fragment} from 'react';

function App(){
	return(
    	<Fragment>
          <h1>Hello</h1>
          <h2>Is it working well?</h2>
        <Fragment>
    )
}

// Fragment는 다음과 같은 형태로도 표현할 수 있다.
function App(){
	return(
    	<>
          <h1>Hello</h1>
          <h2>Is it working well?</h2>
        <>
    )
}

 

 

2. 자바스크립트 표현

JSX 내부에서 코드를 { }로 감싸면 자바스크립트 표현식 작성 가능

import React from 'react';

// 자바스크립트 표현
function App(){
	const name = 'geon';
	return(
    	<>
          <h1>Hello! {name}</h1>
          <h2>How are you?</h2>
        <>
    )
}

export default App;

 

 

3. 조건부 연산자

JSX 내부의 자바스크립트 표현식에서 if문 사용 불가능, 조건에 따른 다른 내용을 렌더링 할 때에는

JSX 밖에서 if무을 사용하여 사전에 값을 지정하거나 { } 안에 조건부 연산자인 삼항 연사자를 사용하면됨

import React from 'react';

// 자바스크립트 표현
function App(){
	const name = 'geon';
	return(
    	<div>
        	{name === 'geon'? (<h1>This is Right name</h1>) : (<h2>This isn't name</h2>)}
        </div>
    )
}

export default App;

 

4. AND 연산자 && 를 사용한 조건부 렌더링

특정 조건을 만족할 때 내용을 보여주고, 만족하지 않을때 아무것도 보여주지 않는 상황

삼항 연산자를 사용해서 구현할 수 있지만 AND 연산자를 사용하면 더 짧은 코드로도 같은 작업을 할 수 있음

 

import React from 'react';

// AND 연산자
function App(){
	const name = 'geon';
	return(
    	<div>
        	{name === 'KIM' && <h1>It's correct</h1>}
        </div>
    )
}

export default App;