3강. JSX

JSX의 정의와 역할

JSX : A syntax extension to JavaScript, JS 확장 문법, JavaScript + XML/HTML

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

JSX의 역할 : html -> JS

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

//JSX 사용
class Hello extend React.Component {
  render(){
    return <div>Hello {this.props.toWhat}</div>;
  }
}

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

//JSX 사용x
class Hello extend React.Component {
  render(){
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}

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

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

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

// ↓

const element = {
  type: 'h1',
  props: {
    className : 'greeting',
    children : 'Hello, world!'
  }
};

 

JSX의 장점 및 사용법

JSX의 장점

- 간결한 코드, 가독성 향상(버그 발견 용이)

//JSX사용
<div>Hello, {name}</div>

//JSX 사용x
React.createElement('div', null, `Hello, ${name}`);

 

- injection Attacks 방어(보안성 ↑)

const title = response.potentiallyMaliciousInput;

//안전한 코드
const element = <h1>{title}</h1>

 

JSX 사용하기

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

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

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

//큰따옴표 사이에 문자열 넣기
const element = <div tabIndex="0"></div>;

//중괄호 사이 JS코드 넣기
const element = <img src={user.avatarUrl}></img>;

//자식(children)정의하기
const element = (
  <div>
    <h1>안녕하세요</h1>
    <h2>열심히 리액트를 공부해봅시다!</h2>
  </div>
);

 

(실습) JSX 코드 작성해보기

//Book.jsx
import React from "react";

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

export default Book;


//jsx를 사용하지않은경우
//가독성 저하
function Book(props){
  return React.createElement(
    'div',
    null,
    [
      React.createElement(
        'h1',
        null,
        `이 책의 이름은 ${props.name}입니다.`
      ),
      React.createElement(
        'h2',
        null,
        `이 책은 총 ${props.numOfPage}페이지입니다.`
      )
    ]
  )
}
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={500} />
        </div>
    )
}

export default Library;

//index.js
root.render(
   <React.StrictMode>
     <Library />
   </React.StrictMode>
);