JSX

ํ•™์Šต ํ‚ค์›Œ๋“œ

  • JSX๋ž€?

    • Syntactic sugar

    • React์—์„œ JSX๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ชฉ์ 

  • React.createElement

    • React Element

JSX

๐Ÿ“– JSX๋ž€ ๋ฌด์—‡์ธ๊ฐ€?

  • JSX is an XML-like syntax extension to ECMAScript

  • JavaScript์— XML์„ ์ถ”๊ฐ€ํ•˜์—ฌ ํ™•์žฅ๋œ ๋ฌธ๋ฒ•

  • JavaScript XML์˜ ์ค„์ž„๋ง

  • ๊ณต์‹์ ์ธ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฌธ๋ฒ•์€ ์•„๋‹ˆ๋‹ค.

  • JSX ํ•˜๋‚˜์˜ ํŒŒ์ผ์— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ HTML์„ ๋™์‹œ์— ์ž‘์„ฑ ํ•  ์ˆ˜ ์žˆ๋‹ค.

  • React์—์„œ๋งŒ ์‚ฌ์šฉ๋˜๋Š”๊ฒŒ ์•„๋‹ˆ๋ฉฐ, Vue.js๋“ฑ ๋‹ค๋ฅธ ํ”„๋ ˆ์ž„์›Œํฌ์—์„œ๋„ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜๋‹ค.

๐Ÿ“– Syntactic sugar๋Š” ๋ฌด์—‡์ธ๊ฐ€?

  • ๋ฌธ๋ฒ•์ ์ธ ์„คํƒ•

  • ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด ์ฐจ์›์—์„œ ์ œ๊ณต๋˜๋Š” ๋…ผ๋ฆฌ์ ์œผ๋กœ ๊ฐ„๊ฒฐํ•˜๊ฒŒ ํ‘œํ˜„ํ•˜๋Š” ๊ฒƒ

  • ์ง๊ด€์ ์ด์ง€๋Š” ์•Š์ง€๋งŒ ์ฝ”๋“œ์˜ ์–‘์„ ์ค„์—ฌ์ฃผ๋Š” ๊ฒƒ๋“ค์„ Syntactic sugar ๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค.

ES2015์—์„œ๋Š” ์—ฌ๋Ÿฌ๊ฐ€์ง€ Syntactic sugar๊ฐ€ ์ถ”๊ฐ€ ๋˜์—ˆ๋‹ค๊ณ  ํ‰๊ฐ€ ๋œ๋‹ค. ์˜ˆ๋กœ Class, ๊ฐ์ฒด๋ถ„ํ•ด, spread(...)

๐Ÿ“Œ React์—์„œ JSX๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ชฉ์ 

JSX๋Š” React.createElement(component, props, ...children)ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๊ธฐ ์œ„ํ•œ Syntactic sugar๋กœ์„œ ์—ญํ™œ ์„ ํ•œ๋‹ค.

  • React์—์„œ JSX ์‚ฌ์šฉ์ด ํ•„์ˆ˜๋Š” ์•„๋‹ˆ๋ฉฐ ๋นŒ๋“œ ํ™˜๊ฒฝ์—์„œ ์ปดํŒŒ์ผ ์„ค์ •์„ ํ•˜๊ณ  ์‹ถ์ง€ ์•Š์„ ๋•Œ JSX ์—†์ด React๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ํŽธ๋ฆฌํ•˜๋‹ค.

  • JSX๋กœ ํ•  ์ˆ˜ ์žˆ๋Š” ๋ชจ๋“  ๊ฒƒ์€ ์ˆœ์ˆ˜ JavaScript๋กœ๋„ ํ•  ์ˆ˜ ์žˆ๋‹ค.

๐Ÿค– JSX ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•˜๋Š”๊ฐ€? (feat.๊ธฐ๋ณธ ๊ทœ์น™)

  • JavaScript ํ‘œํ˜„์‹๋งŒ์„ {} ์ค‘๊ด„ํ˜ธ ์•ˆ์— ๋„ฃ์–ด์„œ ์‚ฌ์šฉ ํ•  ์ˆ˜ ์žˆ๋‹ค.

  • ํƒœ๊ทธ๊ฐ€ ๊ผญ ๋‹ซํ˜€์•ผ ํ•œ๋‹ค.

  • 1๊ฐœ์˜ ์ตœ์ƒ์œ„์˜ ํƒœ๊ทธ๊ฐ€ ์กด์žฌํ•ด์•ผํ•œ๋‹ค.

    • <></> , React.Fragement

๐Ÿ”„ React.createElement (JSX ์—†์ด ์‚ฌ์šฉํ•˜๋Š” React)

  • JSX๋Š” ๋ธŒ๋ผ์šฐ์ €์—์„œ ์‹คํ–‰ํ•˜๊ธฐ ์œ„ํ•ด์„  ์ผ๋ฐ˜์ ์ธ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋กœ ๋ณ€ํ™˜ํ•ด์•ผ ํ•œ๋‹ค.

  • JSX โ†’ JavaScript ์ฝ”๋“œ๋กœ Babel์„ ํ†ตํ•ด ๋ณ€ํ™˜ ํ–ˆ์„ ์‹œ React.createElement ๋ฅผ ํ†ตํ•ด React Element๋ฅผ ์ƒ์„ฑ ํ•  ์ˆ˜ ์žˆ๋‹ค.

Example #1

// JSX
<p>Hello, world!</p>
// JSX์„ ๋ณ€ํ™˜ํ•œ JavaScript
React.createElement("p", null, "Hello, world!");
//the New JSX Transform
import { jsx as _jsx } from "react/jsx-runtime";

_jsx("p", {
  children: "Hello, world!"
});

Example #2

<Greeting name="world" />
React.createElement(Greeting, {name:"world"});
import { jsx as _jsx } from "react/jsx-runtime";

_jsx(Greeting, {
  name: "world"
});

Example #3

<Button type="submit">Send</Button>
React.createElement(Button, {type:"submit"}), "Send";
import { jsx as _jsx } from "react/jsx-runtime";

_jsx(Button, {
  type:"submit",
  children:"Send"
});

๐Ÿ”— ์ฐธ๊ณ 

Last updated