JSX

• A Syntax extension to JavaScript ; JavaScript의 확장 문법
  • JavaScript + XML/HTML
• JSX 코드 예시

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

JSX의 역할

• 내부적으로 XML/HTML 코드를 JavaScript 코드로 변환

createElement()

• JSX 코드를 JavaScript 코드로 변환

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

• type
  • element의 유형
  • <div>나 <span> 같은 HTML 태그 또는 다른 리액트 컴포넌트가 올 수 있음
• props
  • 컴포넌트끼리 전달하여 주고 받는 데이터
  • 변수, 함수, 배열, 객체 등
• children
  • 현재 element가 포함하고 있는 자식 element

JSX 코드로 작성한 예시 코드를 살펴보자.

• Hello라는 이름을 가진 리액트 컴포넌트 내부에서 자바스크립트 코드와 HTML 코드가 결합된 JSX를 사용
• 컴포넌트를 ReactDOM의 render() 함수를 사용해서 실제 화면에 렌더링

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.createElement(Hello, { toWhat: 'World' }, null),
  	document.getElementByID('root')
)

• 두 코드를 비교해보면, Hello 컴포넌트 내부에서 JSX를 사용했던 부분이 React.createElement() 함수로 대체된 것을 알 수 있다.
• 즉, JSX 문법을 사용하면 리액트에서는 내부적으로 모두 createElement 라는 함수를 사용하도록 변환된다.
• 리액트에서는 이러한 방법으로 JSX 코드를 모두 createElement() 함수를 사용하는 코드로 변환하여 코드의 생산성과 가독성을 높인다.

JSX 사용법

• 기본적으로 JSX는 자바스크립트 문법을 확장시킨 것이기 때문에, 모든 자바스크립트 문법을 지원한다.
• 여기에 추가로 XML과 HTML을 섞어서 사용하면 된다.
  • XML/HTML 코드를 사용하다가 중간에 자바스크립트 코드를 사용하고 싶으면 중괄호를 써서 묶어준다.

const name = 'jieun';
const element = <h1>안녕, {name}</h1>;

ReactDOM.render(
	element,
  	document.getElementById('root')
)

• JSX를 사용해서 사용자 이름에 따라 다른 인사말을 표시하도록 만드는 함수를 작성해보자.

function formatName(user){
	return user.firstName + ' ' + user.lastName;
}

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

• HTML 태그 중간이 아닌 태그의 속성에 값을 넣고 싶을 때는 큰 따옴표 사이에 문자열을 넣거나 중괄호 사이에 자바스크립트 코드를 넣으면 된다.

const element = <div tabIndex="0"></div>;

const element = <img src={user.avataUrl}></img>;

• children을 정의하기 위해서는 평소에 HTML을 사용하듯이 상위 태그가 하위 태그를 둘러싸도록 하면 된다.

const element = {
	<div>
    	<h1>안녕하세요</h1>
    	<h2>열심히 리액트 공부를 해봅시다!</h2>
    </div>
};

실습 - JSX 코드 작성해보기

• VS Code로 create-react-app을 이용해 만든 프로젝트를 열고 Book.jsx 이름의 리액트 함수 컴포넌트를 만든다.
  • Book 컴포넌트는 props로 name과 numOfPage를 받아서 이를 출력하는 컴포넌트이다.

// src/chapter_03/Book.jsx

import React from "react";

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

export default Book;

• 이제 Book 컴포넌트를 사용하는 상위 컴포넌트를 만들어보자.
  • Library 컴포넌트는 총 세개의 Book 컴포넌트를 렌더링 하고 있다.

// src/chapter_03/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={500} />
        </div>
    );
}

export default Library;

• 이제 실제로 화면에 컴포넌트를 렌더링하기 위해 index.js 파일을 수정한다.

// src/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 './chapter_03/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();

• npm start 명령어를 통해 프로젝트를 실행해보자.
  • 작성한 내용대로 컴포넌트가 잘 렌더링 됨을 확인할 수 있다.

• 만약 JSX 코드를 사용하지 않고 코드를 작성하면 컴포넌트 코드의 가독성이 매우 떨어진다.

// src/chapter_03/Book.jsx

import React from "react";

function Book(props) {
    return React.createElement(
    	'div',
      	null,
      	[
        	React.createElement(
            	'h1',
              	null,
               `이 책의 이름은 ${props.name}입니다.`
            ),
          	React.createElement(
            	'h2',
              	null,
               `이 책은 총 ${props.numOfPage}페이지로 이루어져 있습니다.``
            )
        ] 
    )
}

export default Book;

References

• 소플의 처음 만난 리액트
• https://www.inflearn.com/course/처음-만난-리액트/