JSX

JSX

A syntax extention to JavaScript
자바스크립트 확장 문법으로 JavaScript + XML / HTML

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

리액트에서 JSX를 쓰는 것이 필수는 아님!

JSX를 사용하면 createElement를 사용하지 않아도 된다.
but 코드가 간결해지고 생산성과 가독성이 올라간다

JSX의 장점

• 간결한 코드

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

// JSX 사용하지 않은 코드
React.createElement('div', null, `Hello, ${name}`)

• 가독성 향상 -> 유지보수에서도 중요! 버그를 발견하기 쉬움
• injection Attack 방어(해킹방어) -> 안정성 향상

const title = response.potentiallyMaliciousInput;

// 이 코드는 안전함
const element = <h1>{title}</h1>

리액트 돔은 랜더링 하기 전에 임베딩된 값을 모두 문자열로 변환하기 때문에 명시적으로 선언되지 않은 값은 괄호 사이에 들어갈 수 없다. -> XSS 어택 방어 가능, 잠재적인 보안 위협을 감소

JSX 사용법

const name = 'Suri'
const element = <div>Hello, {name}</div>

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

• 자바스크립트를 사용하고 싶을땐 {name}처럼 중괄호를 사용
  중괄호로 함수도 호출할 수 있다.

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

// 큰따옴표 사이에 문자열 넣거나
const element = <div tabIndex='0'></div>

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

• children을 정의하는 방법 : 상위태그로 묶어주기

const element = (
<div>
  <h1>Hello!</h1>
  <h2>I am Suri</h2>
</div>
)

연습

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="피프티 피플" numOfPage={400} />
      <Book name="지구에서 한아뿐" numOfPage={200} />
    </div>
  );
}

export default Library;

그리고 index.js를 수정 : App을 Library로 바꿈(import해서)

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
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