[React] JSX의 개념 및 문법

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

JSX란 ?

JSX(JavaScript XML)란 Javascript에 XML을 추가한 확장한 문법으로, React Element를 생성합니다.

 

JSX로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링(여러 개로 흩어져 있는 파일들을 압축, 난독화 등을 하여 하나의 파일로 모아주는 것)되는 과정에서 Babel을 사용하여 일반 자바스크립트 형태의 코드로 변환 됩니다.

 

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

예를 들어 위의 코드는 아래와 같이 변환됩니다.

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

 

JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하고, 자바스크립트에서 HTML을 작성하듯이 하기 때문에 가독성이 높고 작성하기 쉽다는 장점이 있습니다 !

 

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

JSX는 컴파일 과정을 거치면 Javascript 객체로 인식되기 때문에 if나 for문 안에 사용하거나, 변수에 할당하거나, 함수로부터 반환할 수 있습니다. 즉, JSX는 표현식(Expression) 입니다 !

 

JSX 안에서 Attribute(속성) 부여하기

const element = <a href="https://www.reactjs.org"> link </a>;
const element = <img src={user.avatarUrl}></img>;

JSX 에서는 태그의 Atrribute에 따옴표 " "를 사용하여 문자열 리터럴을 정의하거나 중괄호 { }를 사용하여 자바스크립트 표현식을 삽입할 수 있습니다.

 

JSX는 HTML보다는 자바스크립트에 가깝기 때문에, React DOM은 HTML에서 사용하는 속성이름이 아니라 '카멜 케이스 명명 규칙'을 사용합니다. ex) class -> className ⭐️⭐️

 

JSX 부모 자식 구조

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

JSX 는 자식 태그를 포함할 수 있습니다.

 

JSX와 React.createElement()

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

👉🏻 위 2개의 코드는 동일한 역할을 한다 !

 

React에서 요소를 생성할 때 React.createElement() 메소드를 사용하는데, 이 메소드는 (Tag 이름, 속성 값을 가지는 Property, Content) 이 3가지 인자를 가집니다. 

 

따라서 JSX를 사용하게 되면 이렇게 아래 코드와 같이 번거롭게 코드를 작성하지 않고 간편하게 요소를 생성할 수 있습니다 :) ⭐️⭐️⭐️

 

// 주의: 다음 구조는 단순화되었습니다
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

React.createElement() 메소드는 위와 같은 객체를 생성하게 되는데, 이러한 객체를 'React Element'라고 부르며, React는 이 객체를 읽어서 DOM을 구성하고 최신 상태로 유지하는데 사용하게 됩니다 !

 

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요소를 사용하고 싶지 않을 때는 react 모듈에 들어있는 Fragment라는 기능을 사용할 수 있습니다.

// 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에서 Javascript 표현식을 사용하기 위해서는 중괄호 { }로 감싸주어야 한다.

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

import React from 'react';

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

export default App;

 

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

function App() {
	let desc = '';
	const loginYn = 'Y';
	if(loginYn === 'Y') {
		desc = <div>Woohyun 입니다.</div>;
	} else {
		desc = <div>비회원 입니다.</div>;
	}
	return (
		<>
			{desc}
		</>
	);
}

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;

 if 구문과 for 루프는 JavaScript 표현식이 아니기 때문에 JSX 내부 자바스크립트 표현식에서는 사용할 수 없습니다.

따라서 조건부에 따라 다른 렌더링 시 JSX 주변 코드에서 if문을 사용하거나, { }안에서 삼항 연산자(조건부 연산자)를 사용해야 합니다.

 

4. JSX에서 자바스크립트 문법을 사용하려면 중괄호 { }를 사용해야 하기 때문에, 스타일을 적용할 때에도 Object 형태로 넣어주어야 한다. (스타일 속성 또한 카멜 표기법 사용)

function App() {
	const style = {
		backgroundColor: 'green',
		fontSize: '12px'
	}
	return (
		<div style={style}>Hello, Woohyun!</div>
	);
}

 

5. JSX 내에서 주석을 사용하기 위해서는 {/*...*/} 형식을 사용한다.

function App() {
	return (
		<>
			{/* 주석사용방법 */}
			<div>Hello, Woohyun!</div>
		</>
	);
}