[React] JSX

Hyodduru ยท2022๋…„ 3์›” 18์ผ
0

React

๋ชฉ๋ก ๋ณด๊ธฐ
3/22
post-thumbnail

๐Ÿ™‹โ€โ™€๏ธJSX ?

JavaScript Syntax Extension : ๋งˆํฌ์—…์„ ํŽธ๋ฆฌํ•˜๊ฒŒ ์ž‘์„ฑํ•˜๊ธฐ ์œ„ํ•œ js ํ™•์žฅ ๋ฌธ๋ฒ• (๋งˆํฌ์—…๊ณผ js ๋™์‹œ์— ์“ธ ์ˆ˜ ์žˆ๋‹ค)
๊ธฐ๋ณธ์ ์œผ๋กœ React ์š”์†Œ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š”๋ฐ ์šฐ๋ฆฌ๊ฐ€ HTML์—์„œ ์‚ฌ์šฉํ•œ ๋ฌธ๋ฒ•๊ณผ ํก์‚ฌํ•œ ๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ•œ๋‹ค.
JSX๋กœ ์ž‘์„ฑํ•œ ์ฝ”๋“œ๋Š” ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋™์ž‘ํ•˜๋Š” ๊ณผ์ •์—์„œ ๋ฐ”๋ฒจ์„ ์‚ฌ์šฉํ•˜์—ฌ ์ผ๋ฐ˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ˜•ํƒœ์˜ ์ฝ”๋“œ๋กœ ๋ณ€ํ™˜๋œ๋‹ค.

์˜ˆ์‹œ)

  const Title = () => (
 <h3 id="title" onClick={() => console.log("I'm clicked")}>
     Hello I'm a Title
   </h3>
 );

์œ„์˜ ์ฝ”๋“œ๋ฅผ ๋ณด๋ฉด JSX๋Š” HTML ํƒœ๊ทธ๋ฅผ ๊ทธ๋Œ€๋กœ ์‚ฌ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ณด๊ธฐ ์‰ฝ๊ณ  ์ต์ˆ™ํ•˜๋‹ค.
๋˜ํ•œ HTML ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋™์‹œ์— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋„ JSX ์•ˆ์—์„œ ๋™์ž‘ํ•˜๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋‹ค.

JSX ํŠน์ง•

๐Ÿ‘‰ JavaScript ํ‘œํ˜„์„ ํ•  ์‹œ ์ค‘๊ด„ํ˜ธ ์•ˆ์— ์ ์–ด์ค€๋‹ค.

onClick = {() => console.log("hi")}

๐Ÿ‘‰ JS ๋ฌธ๋ฒ•์„ ๊ธฐ๋ฐ˜์œผ๋กœ ์‚ฌ์šฉ => className ์ด๋ผ ํ‘œํ˜„ํ•œ๋‹ค.

<div className ='title'></div>

๐Ÿ‘‰ Inline Styling ํ•˜๋Š” ๋ฐฉ์‹

<div style={{color : "red"}}>Hello React</div>

๐Ÿ‘‰ Self Closing tag์˜ ์‚ฌ์šฉ

<br />๊ณผ ๊ฐ™์€ ํƒœ๊ทธ๋ฅผ self closing tag๋ผ๊ณ  ํ•œ๋‹ค. JSX์—์„œ๋Š” ๋ฐ˜๋“œ์‹œ ํƒœ๊ทธ๋ฅผ ๋‹ซ์•„์ฃผ์–ด์•ผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ„ํŽธํ•˜๊ฒŒ self closing tag๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ๋‹ค!

๐Ÿ‘‰ ๋ชจ๋“  ์š”์†Œ๋ฅผ ๊ฐ์‹ธ๋Š” ์ตœ์ƒ์œ„ ์š”์†Œ

JSX์˜ ํฐ ํŠน์ง• ์ค‘ ํ•˜๋‚˜๋Š” ๋‚ด๋ถ€ ์š”์†Œ๋“ค์„ ๊ฐ์‹ธ๋Š” ์ตœ์ƒ์œ„ ์š”์†Œ๊ฐ€ ์žˆ์–ด์•ผ ํ•œ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค.

๐Ÿ”– <>...</> React Fragment
Fragments๋Š” DOM์— ๋ณ„๋„์˜ ๋…ธ๋“œ๋ฅผ ์ถ”๊ฐ€ํ•˜์ง€ ์•Š๊ณ  ํ•˜๋‚˜์˜ ์ปดํฌ๋„ŒํŠธ ์•ˆ์— ์—ฌ๋Ÿฌ ์š”์†Œ(์ž์‹)๋“ค์„ ๊ฐ„๋‹จํ•˜๊ฒŒ ๊ทธ๋ฃนํ™” ํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์ด๋‹ค. ์š”์†Œ๋“ค์„ ๊ฐ์‹ธ๋Š” div ํƒœ๊ทธ์˜ ๋ถˆํ•„์š”ํ•œ ์ƒ์„ฑ์„ ๋ง‰์„ ์ˆ˜ ์žˆ์–ด ์œ ์šฉํ•˜๊ฒŒ ์‚ฌ์šฉ๋Œ!.

<>
  <div className="loginBtn" onClick={() => console.log("click")}>Login</div>
  <br />
  <div style={{backgroundColor: "grey", height: "10px"}} />
</>

๐Ÿ‘‰ ๋ฐ˜๋“œ์‹œ ๋ฌด์–ธ๊ฐ€๋ฅผ return ํ•ด์ฃผ์–ด์•ผํ•œ๋‹ค.

JSX ๋‚ด์—์„œ ์•„๋ฌด๊ฒƒ๋„ returnํ•ด์ฃผ์ง€ ์•Š๊ณ  component๋ฅผ returnํ•ด์ฃผ๋ฉด ์˜ค๋ฅ˜๊ฐ€ ๋‚œ๋‹ค๋Š” ์  ๊ธฐ์–ตํ•˜๊ธฐ!

๐Ÿ‘‰ ์ถ”๊ฐ€๋กœ ์•Œ์•„๋‘˜ ๊ฒƒ - ์ค‘๊ด„ํ˜ธ ์•ˆ์— ๋“ค์–ด๊ฐˆ ์ˆ˜ ์žˆ๋Š” ๊ฒƒ

JSX ๋‚ด์—์„œ ์ค‘๊ด„ํ˜ธ ์•ˆ์— ๋“ค์–ด๊ฐˆ ์ˆ˜ ์žˆ๋Š” ๊ฒƒ : string number, string๊ณผ number๋ฅผ returnํ•˜๋Š” ํ•จ์ˆ˜ ๋“ฑ. ์—ฐ์‚ฐ์‹์ด๋‚˜ ์‚ผํ•ญ์กฐ๊ฑด์—ฐ์‚ฐ๋„ ๊ฐ€๋Šฅํ•˜๋‹ค.
๐Ÿ”–์‚ผํ•ญ์กฐ๊ฑด ์—ฐ์‚ฐ์ด render๋˜๋Š” ๊ฒƒ์„ ์กฐ๊ฑด๋ถ€ rendering์ด๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค.

ex)

<div>{5 % 2 === 0? '์ง์ˆ˜' : 'ํ™€์ˆ˜'}</div>
let num = 0;
const inCreaseNum = () => num++
 <div>{inCreaseNum}</div>

๐Ÿฏ ๋งˆ๋ฌด๋ฆฌ

JSX ๋ฌธ๋ฒ• ๋‚˜์™€์„œ.. ์ •๋ง ๋‹คํ–‰์ด๋‹ค,,,ใ…Ž.ใ…Ž !

profile
๊พธ์ค€ํžˆ ์„ฑ์žฅํ•˜๊ธฐ๐Ÿฆ‹ https://hyodduru.tistory.com/ ๋กœ ๋ธ”๋กœ๊ทธ ์˜ฎ๊ฒผ์Šต๋‹ˆ๋‹ค

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