[리액트/React] JSX(개념, 문법, 특징)에 대해 알아보자.

🐼 JSX의 의미

자바스크립트로 안에 있는 HTML 코드로서 자바스크립트 XML을 의미한다. HTML은 결국 XML이라고 할 수 있다.

화면 뒷단에서 실행되는 변환 과정이 이루어지는 파일이다.

 

XML이란?

eXtensible Markup Language의 약어. W3C에서 여러 특수 목적의 마크업 언어를 만드는 용도에서 권장되는 다목적 마크업 언어이다. 마크업 언어는 태그 등을 이용하여 데이터의 구조를 기술하는 언어의 한 가지이다. 가장 친숙하고 흔하게 접할 수 있는 마크업 언어로 HTML이 있다.

 

 

JSX 특징

• 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다
• 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다
• JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성할 수 있어 편리하다

 

JSX의 문법

1. 반드시 부모 요소 하나가 감싸는 형태여야 한다

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

 

• 올바른 예시

function App() {
  return (
    <div>
      <p>안녕!</p>
    <div>
  )
}

 

• 부적절한 예시

function App() {
  return (
      <p>안녕!</p>
  )
}

 

2. 자바스크립트 표현식

• JSX에서 중괄호 {}를 사용하여 자바스크립트 표현식으로 사용할 수 있다

import React from 'react';

function App() {
	const hello = '만나서 반가워';
    return (
    <>
    	<h1>{name}</h1>
    </>
  );
}

export default App;

 

• JSX 내부의 JS 표현식에서는 IF문을 사용할 수 없고, 대신 삼항 연산자를 사용한다

function App() {
        let color = 'red';
        return (
            <div>
                {
                    color === 'red' ? (
                        <div>난 정열의 빨강이다.</div>
                    ) : (
                        <div>난 빨강이 아니다.</div>
                    )
                }
            </div>
        );
}

 

3. 연산자 '||'를 사용한 조건부 렌더링

• 리액트 컴포넌트 내 함수에서 undefined 또는 null을 반환하여 렌더링 하면 오류가 발생하지만 JSX 내부에서 undefined 또는 null을 렌더링하면 오류는 발생하지 않고, 아무것도 보여주지 않는다
• OR연산자는 AND연산자와 다르게 특정 값이 undefined나 null일 경우 보여주고 싶은 문구가 있을 때 주로 사용한다

import React from 'react';

function App() {
	const hello = null
    return (
    <>
    	{
          hello === '반가워' || <div>나는 아무것도 아니다.</div>
        }
    </>
  );
}

export default App;

 

4. JSX의 속성 정의

• HTML element에 속성을 정의할 수 있는 것처럼, JSX에서도 엘리먼트에 속성을 정의할 수 있다. 하지만 JSX는 HTML보다 JavaScript에 가깝기 때문에 JSX에서는 HTML 엘리먼트에 속성을 정의하는 방식과는 약간 다른 방식으로 속성을 정의한다
• JSX가 반환하는 React DOM 엘리먼트에서는 기존 HTML 속성이 아닌 카멜케이스로 작성된 속성명을 사용해야 한다. 예를 들어, JSX에서 class는 className이 되고, font-size는 fontSize로 작성한다
• JSX에서 속성값을 정의할 때 중괄호 {}를 사용하여 JS 표현식을 사용할 수 이쓴ㄴ데 이 경우에는 따옴표를 사용하지 않는다

// JSX에서 프로퍼티 명은 카멜케이스로 작성되어야 한다.
const element = <div tabIndex="0"></div>; 

// 속성값 정의 시 JS 표현식을 사용고자자 할 경우 따옴표를 사용하지 않는다.
const element = <img src={user.avatarUrl}/>;

 

5. JSX의 인라인 스타일링

• JSX에서는 style 속성 안에 직접 CSS를 포함할 수 없으며, 스타일 정보를 담은 객체를 참조해야한다. 스타일 객체의 경우 기존 CSS 속성명을 camelCase로 작성한다

var element = <div style="color:red;">Hello World</div>; // 인라인 CSS 사용불가

//--------------------------------------------------------------------

// JXS에서 CSS를 적용하기 위해서는 스타일 객체를 만들어야 한다.
var styleObject = {
	color: "#333",
	padding: 0,
	backgroundColor: "black", // 스타일 각체의 속성은 모두 camelCase로 작성한다.
	fontSize: "32" 
}

var element = <div style={styleObject}>Hello World</div>;

//--------------------------------------------------------------------

// 스타일 객체를 style 속성 내부에 선언 가능
var element = 
<div style={ { color: "#333", fontSize: "32" } }>
	Hello World
</div>;