JSX란

JSX

JSX란?

A syntax extension to javaScript (자바스크립트 확장 문법)

• javaScript + XML / HTML
• 공식적인 JavaScript 문법은 아닙니다.

JSX 코드 예시

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

JSX의 역할

-JSX는 내부적으로 XML/HTML 코드를 자바스크립트로 변환합니다. -createElement() - JSX 코드를 자바스크립트 코드로 변환하는 역할을 합니다.

JSX를 사용한 코드와 사용하지 않은 코드

// JSX를 사용한 코드
class Hello extends React.Component {
    render(){
        return <div>Hello {this.props.toWhat}</div>;
    }
}

ReactDOM.render(
    <Hello toWhat="World" />,
    document.getElementById("root")
);


//JSX를 사용하지 않은 코드
class Hello extends React.Component {
    render(){
        return React.createElement('div', null, "Hello ${this.props.toWhat}');
    }
}

ReactDOM.render(
    React.ceateElement(Hello, { toWhat: 'World'}, null),
    document.getElementById("root")
);

JSX 문법을 사용하면 리액트에서는 내부적으로 createElement 함수를 사용하도록 변환합니다.

또 다른 JSX 코드 비교

// JSX사용
const element = (
    <h1 className="greeting">
        Hello. world!
    </h1>
)

// JSX사용하지 않음
const element = React.createElement(
    'h1',
    { className: 'greeting'},
    'Hello, world!'
)

createElement() 함수

React.createElement(
    type,
    [props],
    [...children]
)

1. type - 엘리먼트의 유형, <div>같은 HTML태그나 다른 리액트 컴포넌트
2. props - 속성
3. children - 현재 엘리먼트가 포함하는 자식 엘리먼트

JSX 사용법

중괄호{}를 이용하여 자바스크립트 변수를 참조하거나 함수를 호출할 수 있습니다.

// 변수 참조
const element = <h1>안녕, {변수}</h1>;

// 함수 호출
const element = <h1>안녕, {함수()}</h1>;

태그 속성(attribute)에 값을 넣는 방법

// 큰따옴표 사이에 문자열을 넣거나
const element = <div tagIndex="0"></div>;

// 중괄호 사이에 자바스크립트 코드를 넣으면 됨
const element = <img src = {user.avatarUrl}></img>

자식을 정의하는 방법

JSX는 부모 요소 하나가 자식들을 감싸는 형태여야합니다.

const element = (
    <div>
        <h1>안녕하세요</h1>
        <h2>반갑습니다</h2>
    </div>
)

JSX 코드 작성해보기

새 폴더 TRYJSX를 만들고 그 안에 Book.jsx 와 Library.jsx 두 개를 다음과 같이 만들어줍니다.

Book.jsx

import React from 'react';

function Book(props){
    return(
        <div>
            <h1>이 책의 이름은 {props.name}입니다.</h1>
            <h2>이 책은 총 {props.numOfPage}페이지로 이뤄져 있습니다</h2>
        </div>
    );
}

export default Book;

Library.jsx

import React from 'react';
import Book from './Book';

function Library(props) {
    return(
        <div>
            <Book name="처음 만난 파이썬" numOfPage={300} />
            <Book name="처음 만난 AWS" numOfPage={400} />
            <Book name="처음 만난 리액트" numOfPage={200} />
        </div>
    );
}

export default Library;

index.js

index.js를 다음과 같이 수정합니다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Library from './TRYJSX/Library'; // 라이브러리 컴포넌트를 가져옴

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Library/>  
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

다음과 같은 페이지가 완성됩니다.