[TIL] React-JSX ๋ฌธ๋ฒ•

link717ยท2020๋…„ 10์›” 5์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
7/53
post-thumbnail

๐Ÿ™€ Advanced JSX

  • JSX์—์„œ๋Š” attribute ์†์„ฑ์ธ class ๋Œ€์‹ ์— className์„ ์‚ฌ์šฉํ•œ๋‹ค.
  • self-closing tag๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค.
Fine in JSX:

  <br />

NOT FINE AT ALL in JSX:

  <br>
  • {} ์•ˆ์— ์ž‘์„ฑ๋œ ์ฝ”๋“œ๋Š” JavaScript ๋ฌธ๋ฒ•์œผ๋กœ ํ•ด์„๋œ๋‹ค.
<h1>(2 + 3)</h1>  โ€บ (2 + 3) : h1 tag ์•ˆ์— ์ž‘์„ฑ๋œ string์œผ๋กœ ์ธ์‹ 
<h1>{2 + 3}</h1>  โ€บ 5       : h1 tag ์•ˆ์— ์ž‘์„ฑ๋œ Javascript ์ฝ”๋“œ๋กœ ์ธ์‹
  • JSX ํ‘œํ˜„์‹์— {}๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์™ธ๋ถ€์—์„œ ์„ ์–ธ๋œ ๋ณ€์ˆ˜์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด ๋ณ€์ˆ˜๋Š” JSX ์•ˆ์—์„œ attribute ์ฒ˜๋Ÿผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ๋ณดํŽธ์ ์ธ ์ž‘์„ฑ๋ฒ•์ด๋ฉฐ ๊ฐ์ฒด ํ˜•ํƒœ์˜ ๋ณ€์ˆ˜๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
- ์™ธ๋ถ€ ์„ ์–ธ ๋ณ€์ˆ˜ ์‚ฌ์šฉ
const sideLength = "200px";

const panda = (
  <img 
    src="images/panda.jpg" 
    alt="panda" 
    height={sideLength} 
    width={sideLength} />
);

- ๋ณ€์ˆ˜ attribute ์ฒ˜๋Ÿผ ์‚ฌ์šฉํ•˜๊ธฐ
const pics = {
  panda: "http://bit.ly/1Tqltv5",
  owl: "http://bit.ly/1XGtkM3",
  owlCat: "http://bit.ly/1Upbczi"
}; 

const panda = (
  <img 
    src={pics.panda} 
    alt="Lazy Panda" />
);

๐Ÿ˜บ Event Listener in JSX

  • JSX elements๋Š” event listener๋ฅผ attribute ์†์„ฑ์œผ๋กœ ๊ฐ€์งˆ ์ˆ˜ ์žˆ๋‹ค. Event listener๋Š” event type ์•ž์— 'on'์„ ๋ถ™ํžŒ๋‹ค. ์ด attributer์˜ ๊ฐ’์€ ํ•จ์ˆ˜ ํ˜•ํƒœ์—ฌ์•ผ ํ•œ๋‹ค.
 function myFunc() {
  alert('Make myFunc the pFunc... omg that was horrible i am so sorry');
}

<img onClick={myFunc} />

๐Ÿ˜ฟ JSX Conditionals

  • if๋ฌธ์ด๋‚˜ for๋ฌธ์€ JavaScript ํ‘œํ˜„์‹์ด ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์— JSX์—์„œ ์ง์ ‘์ ์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜๋Š” ์—†๋‹ค. ๋Œ€์‹  JSX code ์ฃผ๋ณ€์„ ๊ฐ์‹ธ๋Š” ํ˜•ํƒœ๋กœ๋Š” ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•˜๋‹ค. (jsx ์•ˆ์—๋งŒ ์‚ฌ์šฉํ•˜์ง€ ์•Š์œผ๋ฉด ๊ฐ€๋Šฅ!)

  • JSX์—์„œ์˜ ์‚ผํ•ญ ์—ฐ์‚ฐ์ž๋Š” JavaScript์—์„œ์˜ ์‚ฌ์šฉ๋ฒ•๊ณผ ๋™์ผํ•˜๋‹ค. ๋‹ค์ค‘ if๋ฌธ๋„ ํ‘œํ˜„์ด ๊ฐ€๋Šฅํ•˜๋ฏ€๋กœ ํ‘œํ˜„๋ฒ•์„ ์ž˜ ์•Œ์•„๋‘์ž!
condition ? exprIfTrue : exprIfFalse 
  • JSX์—์„œ &&๋Š” ์กฐ๊ฑด๋ถ€ rendering์„ ํ•  ๋•Œ ํ‘œํ˜„์‹์œผ๋กœ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜๋‹ค. ์•„๋ž˜์˜ ํ‘œํ˜„์‹์€ && ์™ผ์ชฝ ์กฐ๊ฑด์ด true์ด๋ฉด ์˜ค๋ฅธ์ชฝ JSX ์ฝ”๋“œ๋ฅผ rendering ํ•˜๊ฒ ๋‹ค๋Š” ์˜๋ฏธ์ด๋‹ค. ์™ผ์ชฝ์˜ ์กฐ๊ฑด์ด false๊ฐ€ ๋˜๋ฉด JSX ์˜ค๋ฅธ์ชฝ์— ์žˆ๋Š” ์ฝ”๋“œ๋Š” ๋ฌด์‹œ๋œ๋‹ค.
const tasty = (
  <ul>
    <li>Applesauce</li>
    { !baby && <li>Pizza</li> }
    { age > 15 && <li>Brussels Sprouts</li> }
    { age > 20 && <li>Oysters</li> }
    { age > 25 && <li>Grappa</li> }
  </ul>
);

๐Ÿ˜บ .map in JSX

  • JSX element๋ฅผ ์—ฌ๋Ÿฌ๊ฐœ ์ƒ์„ฑํ•˜๊ณ  ์‹ถ์„ ๋•Œ ์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” array method์ด๋‹ค. map method๋กœ ์ƒ์„ฑ๋œ array๋ฅผ ์ง์ ‘์ ์œผ๋กœ JSX ์•ˆ์— ์‚ฝ์ž…ํ•˜์—ฌ๋„ element ์ƒ์„ฑ์—๋Š” ๋ฌธ์ œ ์—†๋‹ค.
const strings = ['Home', 'Shop', 'About Me'];
const listItems = strings.map(string => <li>{string}</li>);
<ul>{listItems}</ul>
// This is fine in JSX, not in an explicit array
<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

// This is also fine!
const liArray = [
  <li>item 1</li>, 
  <li>item 2<li>, 
  <li>item 3</li>
];

<ul>{liArray}</ul>

๐Ÿ˜บ keys in JSX

  • JSX์—์„œ ์ƒ์„ฑ๋œ list๋Š” key๋ผ๊ณ  ๋ถˆ๋ฆฌ๋Š” attribute๋ฅผ ๊ฐ€์ง€๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋‹ค. ์ด ์†์„ฑ์€ id์™€ ๊ฐ™์ด ๊ณ ์œ ํ•œ ๊ฐ’์ด ์ง€์ •๋˜์–ด์•ผ ํ•˜๋Š”๋ฐ key๋Š” React๊ฐ€ ์–ด๋–ค ํ•ญ๋ชฉ์„ ๋ณ€๊ฒฝ/์ถ”๊ฐ€/์‚ญ์ œํ• ์ง€ ์‹ค๋ณ„ํ•˜๋Š” ๊ฒƒ์„ ๋„์™€์ค€๋‹ค. ๋ณ„๋„๋กœ key ์†์„ฑ์„ ์ง€์ •ํ•˜์ง€ ์•Š์•˜๋‹ค๋ฉด React๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ array์˜ index๋ฅผ key๋กœ ์‚ฌ์šฉํ•œ๋‹ค.
 1. list item์ด ๋‹ค์Œ์— render ๋˜๋Š” DOM์— memory ํ˜•ํƒœ๋กœ ์กด์žฌํ•ด์•ผ ํ•  ๋•Œ
    (ex: to do list)
 2. ํ•ญ๋ชฉ์˜ ์ˆœ์„œ๊ฐ€ ๋ฐ”๋€Œ๋ฉด ์•ˆ๋˜๋Š” ๊ฒฝ์šฐ
   โŽํ•ญ๋ชฉ์˜ ์ˆœ์„œ๊ฐ€ ๋ฐ”๋€Œ๋Š” ๊ฒฝ์šฐ์—๋Š” key ๊ฐ’์œผ๋กœ index๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์•ˆ๋œ๋‹ค.

๐Ÿ™€ React.createElement

React code๋ฅผ JSX ๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  ์ƒ์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค. JSX element๊ฐ€ item์„ ์ƒ์„ฑํ•˜๋Š” code๊ฐ€ compile ๋  ๋•Œ ๋ฐ”๋€Œ๋Š” ํ‘œํ˜„๋ฒ•์ด ๋ฐ”๋กœ createElement ์ด๋‹ค.

//JSX Expression
const h1 = <h1>Hello world</h1>;

//non JSX Expression
const h1 = React.createElement(
  "h1",
  null,
  "Hello, world"
);
profile
Turtle Never stop

0๊ฐœ์˜ ๋Œ“๊ธ€