Front-end/REACT

[React]JSX

์œค๋ฏผ_ 2022. 1. 1. 18:04

๐Ÿค”JSX๋ž€?

์‰ฝ๊ฒŒ ๋งํ•ด HTML ๋ฌธ๋ฒ•์„ JavaScript ์ฝ”๋“œ ๋‚ด๋ถ€์— ์“ด ๊ฒƒ์ด ๋ฐ”๋กœ JSX๋‹ค!
(JavaScript eXtension)

์ฆ‰, JavaScript์˜ ํ™•์žฅ ๋ฒ„์ „์œผ๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ผ๊ณ  ๋ณด๋ฉด๋œ๋‹ค.

 

"React์—์„œ HTML์„ ํ‘œํ˜„ํ•  ๋•Œ, JSX๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค. ์™ธ๊ด€์ƒ HTML๊ฐ™์€ ๋งˆํฌ์—… ์–ธ์–ด๋ฅผ ๋ฆฌํ„ฐ๋Ÿด๋กœ ์ž…๋ ฅํ•˜๋Š” ๊ฒƒ์œผ๋กœ ๋ณด์ด๋Š”๋ฐ, ๋นŒ๋“œ ์‹œ Babel์— ์˜ํ•ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๋ณ€ํ™˜๋œ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋ฅผ HTML์ฒ˜๋Ÿผ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์šฉ์ดํ•œ ๊ฐœ๋ฐœ์ด ๊ฐ€๋Šฅํ•˜๋‹ค."

[์ถœ์ฒ˜]๋‚˜๋ฌด์œ„ํ‚ค

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

 

React.js ๋Š” ์ผ๋ฐ˜ JavaScript ๋ฌธ๋ฒ•์ด ์•„๋‹Œ JSX ๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ•˜์—ฌ UI๋ฅผ ํ…œํ”Œ๋ฆฟํ™” ํ•œ๋‹ค.

JSX๋ฅผ ์‚ฌ์šฉํ•˜๋Š”๊ฒƒ์ด ํ•„์ˆ˜๋Š” ์•„๋‹ˆ์ง€๋งŒ ์ด๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์žฅ์ ์ด ์žˆ๋‹ค.

  • JSX๋Š” ์ปดํŒŒ์ผ๋ง ๋˜๋ฉด์„œ ์ตœ์ ํ™” ๋˜๋ฏ€๋กœ, ๋น ๋ฅด๋‹ค
  • Type-safe (์–ด๋– ํ•œ ์—ฐ์‚ฐ๋„ ์ •์˜๋˜์ง€ ์•Š์€ ๊ฒฐ๊ณผ๋ฅผ ๋‚ด๋†“์ง€ ์•Š๋Š”๊ฒƒ, ์ฆ‰ ์˜ˆ์ธก ๋ถˆ๊ฐ€๋Šฅํ•œ ๊ฒฐ๊ณผ๋ฅผ ๋‚˜ํƒ€๋‚ด์ง€ ์•Š๋Š” ๊ฒƒ [์ถœ์ฒ˜: jerrypop ๋ธ”๋กœ๊ทธ]) ํ•˜๋ฉฐ ์ปดํŒŒ์ผ๋ง ๊ณผ์ •์—์„œ ์—๋Ÿฌ๋ฅผ ๊ฐ์ง€ ํ•  ์ˆ˜ ์žˆ๋‹ค.
  • HTML์— ์ต์ˆ™ํ•˜๋‹ค๋ฉด, JSX๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋” ์‰ฝ๊ณ  ๋น ๋ฅด๊ฒŒ ํ…œํ”Œ๋ฆฟ์„ ์ž‘์„ฑ ํ•  ์ˆ˜ ์žˆ๋‹ค.

 

ํ•œ๋ฒˆ ์•„๋ž˜ ์ฝ”๋“œ๋“ค์„ ํ†ตํ•ด JSX์— ๋Œ€ํ•˜์—ฌ ์•Œ์•„๋ณด์ง€

function App(){
	return(
    <div>
    	Hello<b>react</b>
   </div>
   );
}

ํ•ด๋‹น ์ฝ”๋“œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ๋ณ€ํ™˜๋œ๋‹ค.

function App(){
	return React.createElement("div", null, "Hello", React.createElement("b", null,"react"));
  •  JSX๋Š” ํ•˜๋‚˜์˜ ํŒŒ์ผ์— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ HTML์„ ๋™์‹œ์— ์ž‘์„ฑํ•˜์—ฌ ํŽธ๋ฆฌํ•˜๋‹ค.
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ HTML์„ ์ž‘์„ฑํ•˜๋“ฏ์ด ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ€๋…์„ฑ์ด ๋†’๊ณ  ์ž‘์„ฑํ•˜๊ธฐ ์‰ฝ๋‹ค.

๐Ÿ“Œ

Q . JSX๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฌธ๋ฒ•์ธ๊ฐ€์š”?    A . JSX๋Š” ๋ฆฌ์•กํŠธ๋กœ ๊ฐœ๋ฐœํ•  ๋•Œ ์‚ฌ์šฉ๋˜๋Š” ๊ฒƒ์œผ๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฌธ๋ฒ•์ด ์•„๋‹ˆ๋‹ค. ๋ฐ”๋ฒจ์—์„œ๋Š” ์—ฌ๋Ÿฌ ๋ฌธ๋ฒ•์„ ์ง€์›ํ•  ์ˆ˜ ์žˆ๋„๋ก preset ๋ฐ plugin์„ ์„ค์ •ํ•œ๋‹ค. ๋ฐ”๋ฒจ์„ ํ†ตํ•ด ๊ฐœ๋ฐœ์ž๋“ค์ด ์ž„์˜๋กœ ๋งŒ๋“  ๋ฌธ๋ฒ•, ํ˜น์€ ์ฐจ๊ธฐ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋ฌธ๋ฒ•๋“ค์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.


JSX ๋ฌธ๋ฒ• ๊ทœ์น™

 

1.๋ฐ˜๋“œ์‹œ ๋ถ€๋ชจ ์š”์†Œ ํ•˜๋‚˜๊ฐ€ ๊ฐ์‹ธ๋Š” ํ˜•ํƒœ์—ฌ์•ผํ•œ๋‹ค.

 Virtual DOM์—์„œ ์ปดํฌ๋„ŒํŠธ ๋ณ€ํ™”๋ฅผ ๊ฐ์ง€ํ•  ๋•Œ, ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์—์„œ๋Š” ํ•˜๋‚˜์˜ DOM ํŠธ๋ฆฌ ๊ตฌ์กฐ๊ฐ€ ์ด๋ค„์ ธ์•ผํ•œ๋‹ค.

์˜ˆ์‹œ

(<div></div>)

// div๋ฅผ ์‚ฌ์šฉ ํ•˜์˜€๋‹ค. ๋•Œ๋ฌธ์—์Šคํƒ€์ผ ์ ์šฉ์‹œ ์ž‘์„ฑํ•œ ์ฝ”๋“œ๋ฅผ div๋กœ ํ•œ๋ฒˆ ๋” ๊ฐ์ŒŒ๋‹ค๋Š” ๋ถ€๋ถ„์„ ๊ณ ๋ คํ•ด์•ผ ํ•œ๋‹ค.
function App() { 
	return ( 
    	<div>
        	<div>Hello</div>
           	<div>GodDaeHee!</div>
        </div>
   	);
}

(<Fragment></Fragment>)

// <Fragment>๋ฅผ ์‚ฌ์šฉ๊ฐ€๋Šฅ ํ•˜์ง€๋งŒ <div>ํƒœ๊ทธ๋ณด๋‹ค ๋ฌด๊ฑฐ์šด ํŽธ์ด๋‹ค.
function App() { 
	return ( 
    	<Fragment>
        	<div>Hello</div> 
            	<div>GodDaeHee!</div>
       	</Fragment>
		);
}

(<></>)

function App() { 
	return ( 
    	<> 
        	<div>Hello</div>
            	<div>GodDaeHee!</div>
        </>
     ); 
}

 

2. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ‘œํ˜„์‹

  • JSX ์•ˆ์—์„œ๋„ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ‘œํ˜„์‹์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ‘œํ˜„์‹์„ ์ž‘์„ฑ์‹œ JSX๋‚ด๋ถ€์— ์ฝ”๋“œ๋ฅผ { }๋กœ ๊ฐ์‹ธ์ฃผ๋ฉด ๋œ๋‹ค.
  • ํ•ด๋‹น ๋งํฌ์— ์žˆ๋Š” ๋ชจ๋“  JavaScript ํ‘œํ˜„์‹์„ ๋„ฃ์„ ์ˆ˜ ์žˆ๋‹ค.
function App() { 
	const name = 'GodDaeHee'; 
    return ( 
    	<div>
        	<div>Hello</div> 
           	<div>{name}!</div> 
	</div>
	); 
}

3. if๋ฌธ(for๋ฌธ) ๋Œ€์‹  ์‚ผํ•ญ ์—ฐ์‚ฐ์ž(์กฐ๊ฑด๋ถ€ ์—ฐ์‚ฐ์ž) ์‚ฌ์šฉ

  •   if ๊ตฌ๋ฌธ๊ณผ for ๋ฃจํ”„๋Š” JavaScript ํ‘œํ˜„์‹์ด ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์— JSX ๋‚ด๋ถ€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ‘œํ˜„์‹์—์„œ๋Š” ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋‹ค.
  • ์กฐ๊ฑด๋ถ€์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ๋ Œ๋”๋ง ์‹œ JSX ์ฃผ๋ณ€ ์ฝ”๋“œ์—์„œ if๋ฌธ์„ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜, {}์•ˆ์—์„œ ์‚ผํ•ญ ์—ฐ์‚ฐ์ž(์กฐ๊ฑด๋ถ€ ์—ฐ์‚ฐ์ž)๋ฅผ ์‚ฌ์šฉ ํ•œ๋‹ค.

 

4. React DOM์€ HTML ์–ดํŠธ๋ฆฌ๋ทฐํŠธ ์ด๋ฆ„ ๋Œ€์‹  CamelCase ํ”„๋กœํผํ‹ฐ ๋ช…๋ช… ๊ทœ์น™์„ ์‚ฌ์šฉ ํ•œ๋‹ค.

์นด๋ฉœ ์ผ€์ด์Šค (Camel Case)

 - ํ”ํžˆ ์ ‘ํ•˜๋Š” ํ‘œ๊ธฐ๋ฒ•. ๊ฐ€์žฅ ์ฒ˜์Œ์— ์˜ค๋Š” ๋ฌธ์ž๋Š” ์†Œ๋ฌธ์ž๋กœ ํ‘œ๊ธฐํ•˜๊ณ , ๊ฐ ๋‹จ์–ด์˜ ์ฒซ๊ธ€์ž๋Š” ๋Œ€๋ฌธ์ž๋กœ ํ‘œ๊ธฐ

 - deleteNumber, insertNumer, tabindex๋Š” tabIndex๊ฐ€ ๋œ๋‹ค.(๊ฐ ๋‹จ์–ด์˜ ์ฒซ๊ธ€์ž๊ฐ€ ๋Œ€๋ฌธ์ž๋กœ ํ‘œ๊ธฐ๋จ์„ ๋ณด์—ฌ์คŒ)

 

5. JSX ๋‚ด์—์„œ ์ฃผ์„ ์‚ฌ์šฉ ๋ฐฉ๋ฒ•

React ๋‚ด์—์„œ ์ฃผ์„ ์ฒ˜๋ฆฌ๋ฐฉ๋ฒ•์€ javascript์™€ ๋™์ผํ•˜๊ฒŒ ํ•œ์ค„ ์ฃผ์„์€ //์„ ์ด์šฉํ•˜๊ณ  ์–ด๋ ค์ค„์€ /* */์„ ์ด์šฉํ•ฉ๋‹ˆ๋‹ค.

//console.log("sungmin");

/*
console.log("yoon");
console.log("coding");
*/

JSX๋‚ด์—์„œ๋Š” javascript์˜ ์—ฌ๋Ÿฌ์ค„ ์ฃผ์„์„ {}๋กœ ๊ฐ์‹ธ์ค€ ํ˜•ํƒœ๋กœ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

{/* <div className = "Yoon"> React JSX</div> */}

'Front-end > REACT' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[React] React๋ž€ ๋ฌด์—‡์ธ๊ฐ€?  (0) 2021.12.18