[React 기초] JSX란? / JSX 문법

JSX란?

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

 

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

위의 코드는 아래와 같이 변환된다.

function App(){
	return React.createElement("div", null, "Hello", React.createElement("b", null "react"));
}

만약 컴포넌트를 렌더링 할 때 마다 위 코드처럼 매번 React.createElement 함수를 사용해야 한다면 매우 불편할 것이다. JSX를 사용하면 매우 편하게 UI를 렌더링할 수 있다.

 

 

JSX도 자바스크립트 문법인가?

JSX는 리액트로 개발할 때 사용되므로 공식적인 자바스크립트 문법이 아니다. 바벨에서는 여러 문법을 지원할 수 있도록 preset 및 plugin을 설정한다. 바벨을 통해 개발자들이 임의로 만든 문법, 혹은 차기 자바스크립트의 문법들을 사용할 수 있다.

 

---

JSX 문법 규칙

 

1. 감싸인 요소

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

import React from 'react';

// 잘못된 코드
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>
    )
}

export default App;



//=====================================================



// div요소를 사용하고 싶지 않을 때 Fragment라는 기능 사용
// 코드 상단 import 구문에서 react 모듈에 들어있는 Fragment라는 컴포넌트를 추가로 불러오기
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>
        <>
    )
}

export default App;

하나의 요소로 감싸줘야하는 이유?

Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM트리 구조로 이루어져야 한다는 규칙이 있다. 

 

 

2.자바스크립트 표현

JSX가 내부에서 코드를 {  } 로 감싸면 자바스크립트 표현식을 작성할 수 있다.

import React from 'react';

// 자바스크립트 표현
function App(){
	const name = 'react';
	return(
    	<>
          <h1>Hello! {name}</h1>
          <h2>Is it working well?</h2>
        <>
    )
}

export default App;

 

 

3. 조건부 연산자

JSX 내부의 자바스크립트 표현식에서 if문을 사용할 수는 없다. 하지만 조건에 따라 다른 내용을 렌더링해야 할 때는 JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나, { } 안에 조건부 연산자를 사용하면 된다. 조건부 연산자는 삼항 연산자이다.

import React from 'react';

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

export default App;

 

 

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

개발하다 보면 특정 조건을 만족할 때 내용을 보여 주고, 만족하지 않을 때 아예 아무것도 렌더링 하지 않아야 하는 상황이 올 수 있다. 조건부 연산자(삼항 연산자)로도 구현할 수 있지만 AND 연산자를 사용하면 더 짧은 코드로 똑같은 작업을 할 수 있다.

import React from 'react';

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

export default App;

위 코드를 실행하면 브라우저에 아무것도 나타나지 않을 것인다.

 

&& 연산자로 조건부 렌더링을 할 수 있는 이유는 리액트에서 false를 렌더링할 때는 null과 마찬가지로 아무것도 나타나지 않기 때문이다. 여기서 한 가지 주의해야 할 점은 falsy한 값인 0은 예외적으로 화면에 나타난다는 점이다.

const number = 0;
return number && <div>내용</div>

위 코드는 화면에 '내용'을 보여주는 것이 아니라 숫자 0을 보여 준다.

 

 

5. undefined를 렌더링하지 않기

리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 안 된다. 예를 들어 다음과 같은 코드는 오류를 발생시킨다.

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

// undefined를 렌더링 하지 않기
function App(){
	const name = 'undefined';
	return name;
}

export default App;

코드를 저장한 후 브라우저를 확인해 보면 다음과 같은 오류를 볼 수 있다.

App(...): Nothing was returned from render. This usually means a return statement is missing. 
Or, to render nothing, return null 

어떤 값이 undefined일 수도 있다면, OR(||)연산자를 사용하면 해당 값이 undefined일 때 사용할 값을 지정할 수 있으므로 간단하게 오류를 방지할 수 있다.

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

function App(){
	const name = 'undefined';
	return name || '값이 undefined입니다.';
}

export default App;

반면 JSX 내부에서 undefined를 렌더링하는 것은 괜찮다.

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

function App(){
	const name = 'undefined';
	return <div>{name}</div>
}

export default App;

name 값이 undefined일 때 보여 주고 싶은 문구가 있다면 다음과 같이 코드를 작성할 수 있다.

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

function App(){
	const name = 'undefined';
	return <div>{name || 'react'}</div>;
}

export default App;

 

 

 

 

 

이 글은 '리액트를 다루는 기술' 책을 보고 정리한 내용입니다. 자세한 내용은 책을 참고하시기 바랍니다.