[처음 만난 리액트]섹션 3. JSX

JSX의 정의와 역할

• JSX의 정의
  • A syntax extension to Javascript
  • 즉 자바스크립트의 확장 문법
  • 자바스크립트 + XML/HTML
  • 1 const element = <h1>Hello, world!</h1>;
• 역할
  • JSX는 내부적으로 XML 코드를 자스로 변환하는 과정을 거침
  • React.createElement( type, [props], [...children] )
  • JSX를 사용한 코드
  • class Hello extends React.Component { render() { return <div>Hello {this.props.toWhat}</div>; } } ReactDOM.render( <Hello woWhat="World" />, document.getElementById('root') );
  • JSX를 사용하지 않은 코드 
  • // JSX를 사용한 코드 const element = ( <h1 className="greeting"> Hello, World! </h1> ) // JSX를 사용하지 않은 코드 const element = React.createElement( 'h1', { className: 'greeting' }, 'Hello, world!' )
  • 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') );

• React.createElement()의 결과로 아래와 같은 객체가 생성됨

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

  • type : element의 유형
  • props : 속성
  • children : 현재 element가 포함하고 있는 자식 element
  • 리액트에서 JSX를 사용하는 것이 필수는 아니지만 훨씬 편리함
• const elemnet = { type: 'h1', props: { className: 'greeting', children: 'Hello, world!' } }

JSX의 장점 및 사용법

JSX의 장점

• 편리함
• // JSX 사용함 <div>Hello, {name}</div> // JSX 사용 안 함 React.createElement('div', null, `Hello, ${name}`);

• 가독성 향상
  • 버그를 발견하기 쉬움
• injection Attacks 방어
  • 보안성 향상
  • const title = response.potentiallyMaliciousInput; // 이 코드는 안전합니다. const element = <h1>{title}</h1>;

JSX 사용법

• Javascript 코드 + XML / HTML

    ... XML / HTML
    {Javascript 코드}
    ... XML / HTML

    function formatName(user) {
            return user.firstName + ' ' + user.lastName;
    }
  
    const user = {
            firstName: 'Inje',
            lastName: 'Lee'
    };
  
    const element = {
            <h1>
                    Hello, {formatUser(user)}
            </h1>
    );
  
    ReactDOM.render(
            element,
            document.getElementById('root')
    );

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

• const name = '소플'; const element = <h1>안녕, {name}</h1>; ReactDOM.render( element, document.getElementById('root') );

• 태그의 속성에 값을 넣는 방법
• // 큰따옴표 사이에 문자열을 넣기너 const element = <div tabIndex="0"></div>; // 중괄호 사이에 자바스크립트 코드를 넣으면 됨! const element = <img src={user.avatarUrl}</img>;

• 자식을 정의하는 방법
• const element = { <div> <h1>안녕하세요</h1> <h2>열심히 리액트를 공부해 봅시다!</h2> </div> );

실습. JSX 코드 작성해 보기

// 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;

// 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;