FE/React

[React] JSX ์ •์˜ ๋ฐ ๋ฌธ๋ฒ•

coding_jelly 2023. 1. 24. 16:44

๐Ÿ“Œ  JSX (Javascript XML)๋ž€?

• Javascript ์— XML์„ ์ถ”๊ฐ€ํ•ด ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๋ฌธ๋ฒ• 

๋ฆฌ์•กํŠธ์—์„œ 'JSX' ๋ผ๋Š” ํŠน๋ณ„ํ•œ ๋ฌธ๋ฒ•์œผ๋กœ ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ๋งŒ๋“ค์–ด ์‚ฌ์šฉ์ž์—๊ฒŒ UI๊ฐ€ ์‹ค์ œ๋กœ ์–ด๋–ป๊ฒŒ ํ‘œํ˜„๋  ๊ฒƒ์ธ์ง€ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. JSX๋Š” Javascript์— XML์„ ์ถ”๊ฐ€ํ•œ Javascript๋ฅผ ํ™•์žฅํ•œ ๋ฌธ๋ฒ•์œผ๋กœ, ๊ณต์‹์ ์ธ ์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ ๋ฌธ๋ฒ•์€ ์•„๋‹™๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๊ฐ€๋…์„ฑ์ด ๋†’๊ณ  ์ดํ•ดํ•˜๊ธฐ ์‰ฌ์šด, ๋ฆฌ์•กํŠธ๋งŒ์˜ ํŠน๋ณ„ํ•œ ์Šคํฌ๋ฆฝํŠธ ๋ฌธ๋ฒ•์ž…๋‹ˆ๋‹ค.  

 

์•„๋ž˜๋Š” ๋ฆฌ์•กํŠธ์—์„œ App.js ์— JSX๋กœ  "Hello! React"๋ฅผ ํ™”๋ฉด์— ๋‚˜ํƒ€๋‚ด๋Š” ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค. 

function App() {
    const HelloBlock =  <h1>Hello React!</h1>;
    return(
        <div>
            {HelloBlock}
        </div>
  );
}

 

์—ฌ๊ธฐ์„œ "Hello! React" ๊ฐ€ ๋งˆ์น˜ XML ์ฝ”๋“œ์ฒ˜๋Ÿผ <h1></h1> ํƒœ๊ทธ์— ๊ฐ์‹ธ์ ธ ์žˆ๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๋ ‡๊ฒŒ XMLํƒœ๊ทธ๋กœ ๊ฐ์‹ธ๋“ฏ HTML ํƒœ๊ทธ๋กœ ๊ฐ์‹ธ "์—˜๋ฆฌ๋จผํŠธ(element)"๋ฅผ ๋งŒ๋“œ๋Š” ๋ฌธ๋ฒ•์„ JSX ๋ฌธ๋ฒ•์ด๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค. 

const HelloBlock = <h1> Hello! React </h1>

 

์‹ค์ œ ๋ธŒ๋ผ์šฐ์ €์—์„œ HTML ์š”์†Œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค. <div><h1> Hello React! </h1></div> ํƒœ๊ทธ๋กœ ํ‘œํ˜„๋œ ๊ฒƒ์ด ๋ณด์ด์‹œ๋‚˜์š”? 

 

JSX๋กœ const ๋ณ€์ˆ˜์— "Hello React"๋ฅผ ์„ ์–ธํ–ˆ๋Š”๋ฐ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์–ด๋–ป๊ฒŒ ์‹ค์ œ HTML ์ฝ”๋“œ๋กœ ํ‘œํ˜„๋ ๊นŒ์š”?

์šฐ๋ฆฌ๊ฐ€ ์„ ์–ธํ•œ JSX๋Š”, ๋ธŒ๋ผ์šฐ์ €์— ์‹คํ–‰๋˜๊ธฐ ์ „์— ์ฝ”๋“œ๊ฐ€ ๋ฒˆ๋“ค๋ง๋˜๋Š” ๊ณผ์ •์—์„œ, "๋ฐ”๋ฒจ(Babel)"์„ ์‚ฌ์šฉํ•ด ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ดํ•ด ๊ฐ€๋Šฅํ•œ, ์ผ๋ฐ˜์ ์ธ ์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ๋กœ ํ‘œํ˜„๋˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๋ฐ”๋ฒจ ๊ณต์‹ ๋ฌธ์„œ ์ฐธ๊ณ 

 


๐Ÿ“Œ  JSX ๋ฌธ๋ฒ• 

โšก  ๋ฐ˜๋“œ์‹œ ๋ถ€๋ชจ ์š”์†Œ ํ•˜๋‚˜๊ฐ€ ๊ฐ์‹ธ๋Š” ํ˜•ํƒœ 

์—ฌ๋Ÿฌ๋ถ„์ด ์„ ์–ธํ•œ ์ปดํฌ๋„ŒํŠธ ์•ˆ์— ์—ฌ๋Ÿฌ ๊ฐ€์ง€ ํƒœ๊ทธ๊ฐ€ ์žˆ๋‹ค๋ฉด ๋ฐ˜๋“œ์‹œ <div> ๋˜๋Š” ๋‹ค๋ฅธ ์ปดํฌ๋„ŒํŠธ ๋“ฑ์˜ ๋ถ€๋ชจ ์š”์†Œ ํ•˜๋‚˜๋กœ ๊ฐ์‹ธ์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ ‡๋‹ค๋ฉด ์™œ ๋ฐ˜๋“œ์‹œ ๋ถ€๋ชจ ์š”์†Œ๊ฐ€ ํ•„์š”ํ•  ๊นŒ์š”? ๋ฐ˜๋“œ์‹œ์—๋Š” ์ด์œ ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ ์ด์œ ๋Š” Virtual DOM์ด ์ปดํฌ๋„ŒํŠธ์˜ ๋ณ€๊ฒฝ์„ ๋น ๋ฅด๊ฒŒ ๊ฐ์ง€ ํ•˜์—ฌ ๋น„๊ต ๊ฐ€๋Šฅํ•˜๋„๋ก ์„ค๊ณ„๋˜์–ด ์žˆ๊ณ , DOM์€ "ํŠธ๋ฆฌ ํ˜•ํƒœ"๋กœ ๋˜์–ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์—, ๋ฐ˜๋“œ์‹œ ๋ถ€๋ชจ ๋…ธ๋“œ๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. 

โ€ป ๋ฆฌ์•กํŠธ 16ver ์ด์ƒ์€ Fragment ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜๋ฉด ๋ฐ˜๋“œ์‹œ div ๋กœ ๊ฐ์‹ธ์ง€ ์•Š์•„๋„ ๋˜๋ฉฐ, Fragment๋กœ ๊ฐ์‹ธ๋ฉด ๋ฉ๋‹ˆ๋‹ค. 

 

์ •์ƒ ์ฝ”๋“œ : h1, h2ํƒœ๊ทธ๊ฐ€ div ์ฝ”๋“œ๋กœ ๊ฐ์‹ธ์ง„ ํ˜•ํƒœ  

function App() {
    return(
        <div>
            <h1>Hello</h1>
            <h2>React</h2>
        </div>
  );
}

 

์—๋Ÿฌ ์ฝ”๋“œ : h1, h2ํƒœ๊ทธ๊ฐ€ ๋…๋ฆฝ์ ์œผ๋กœ ์„ ์–ธ๋œ ํ˜•ํƒœ  

๋ถ€๋ชจ๋กœ ๊ฐ์‹ธ์ง€์ง€ ์•Š์€ ๊ฒฝ์šฐ, ์ฝ”๋“œ๊ฐ€ ์ œ๋Œ€๋กœ ์ž‘๋™ํ•˜์ง€ ์•Š๊ณ  ์•„๋ž˜์™€ ๊ฐ™์ด ์˜ค๋ฅ˜๊ฐ€ ๋‚˜ํƒ€๋‚  ๊ฒƒ์ž…๋‹ˆ๋‹ค. 

function App() {
    return(
        <h1>Hello</h1>
        <h2>React</h2>
  );
}

 

 

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

๋ฆฌ์•กํŠธ์—์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ‘œํ˜„์‹์„ ์ž‘์„ฑํ•˜๋ ค๋ฉด JSX ๋‚ด๋ถ€์—์„œ { } ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐ์‹ธ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

function App() {
    const name =  'Hello React!';
    return(
        <div> {name} </div>
  );
}

 

 

โšก  ์กฐ๊ฑด๋ถ€ ์—ฐ์‚ฐ์ž

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ž‘์„ฑํ•˜๋‹ค๋ณด๋ฉด ์กฐ๊ฑด์— ๋”ฐ๋ผ ๋‹ค๋ฅด๊ฒŒ ๋ Œ๋”๋งํ•ด์•ผํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์ด ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ๋ฆฌ์•กํŠธ์—์„œ JSX๋Š” If๋ฌธ์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์—, ์กฐ๊ฑด๋ถ€(์‚ผํ•ญ) ์—ฐ์‚ฐ์ž๋กœ ์กฐ๊ฑด์— ๋”ฐ๋ผ ๋ Œ๋”๋งํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์•„๋ž˜๋Š” ์กฐ๊ฑด์— ์‚ฌ์šฉ๋˜๋Š” ์‚ผํ•ญ ์—ฐ์‚ฐ์ž, AND ์—ฐ์‚ฐ์ž, OR ์—ฐ์‚ฐ์ž๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค :D 

 

• If ๋ฌธ ์‚ฌ์šฉํ•˜๊ธฐ 

๋ฆฌ์•กํŠธ์—์„œ if๋ฌธ์€ { } ์•ˆ์—์„œ ์‚ผํ•ญ ์—ฐ์‚ฐ์ž๋กœ ๋‚˜ํƒ€๋‚ด๋ฉด ๋ฉ๋‹ˆ๋‹ค.

์‚ผํ•ญ ์—ฐ์‚ฐ์ž๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ if ... else ๊ตฌ๋ฌธ์˜ ๋Œ€์ฒด์žฌ๋กœ ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” ๋ฐ์š”. ์•ž์—์„œ ๋ถ€ํ„ฐ ์กฐ๊ฑด๋ฌธ, ๋ฌผ์Œํ‘œ(?), ์กฐ๊ฑด๋ฌธ์ด ์ฐธ์ผ ๊ฒฝ์šฐ ์‹คํ–‰ํ•  ํ‘œํ˜„์‹, ์ฝœ๋ก (:), ์กฐ๊ฑด๋ฌธ์ด ๊ฑฐ์ง“์ผ ๊ฒฝ์šฐ ์‹คํ–‰ํ•  ํ‘œํ˜„์‹์œผ๋กœ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.

์กฐ๊ฑด๋ฌธ ? truthy์ผ ๊ฒฝ์šฐ ์‹คํ–‰ํ•  ํ‘œํ˜„์‹ : falsy์ผ ๊ฒฝ์šฐ ์‹คํ–‰ํ•  ํ‘œํ˜„์‹  
{name === 'Hello React!' ? <h1>ํ—ฌ๋กœ ๋ฆฌ์•กํŠธ</h1> : <h1>๋ฐ”์ด ๋ฆฌ์•กํŠธ</h1>}

 

• AND ์—ฐ์‚ฐ์ž 

๋ฆฌ์•กํŠธ์—์„œ AND ์—ฐ์‚ฐ์ž๋Š” '&&'์„ ์‚ฌ์šฉํ•ด ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. 

A์™€ B ๊ฐ€ ๋‘˜๋‹ค True ์ผ ๋•Œ๋งŒ ์‹์ด ์„ฑ๋ฆฝ๋˜๋ฉฐ, A์™€ B์ค‘ ํ•˜๋‚˜๋ผ๋„ False ํ•  ๊ฒฝ์šฐ null๊ณผ ๊ฐ™์ด ๊ฐ’์ด ์•„๋ฌด๊ฒƒ๋„ ์ถœ๋ ฅ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. 

A && B 
{'Hello world' && <h1>Hello world</h1>} //true 

const name =  'Hello React';
{name == 'Hello world' && <h1>Hello world</h1>} //false

 

• OR ์—ฐ์‚ฐ์ž 

๋ฆฌ์•กํŠธ์—์„œ OR์—ฐ์‚ฐ์ž๋Š” '||' ์„ ์‚ฌ์šฉํ•ด ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. 

OR์—ฐ์‚ฐ์ž๋Š” A์™€ B ์ค‘ ํ•˜๋‚˜๋งŒ True ๋ผ๋ฉด ์‹์ด ์„ฑ๋ฆฝ๋ฉ๋‹ˆ๋‹ค.

A || B

์•„๋ž˜ ํ‘œํ˜„์‹์—์„œ <h1></h1> ์•ˆ์˜ ๊ฐ’์€ True ์ด๊ธฐ ๋•Œ๋ฌธ์— ํ™”๋ฉด์—๋Š” "Hello World"๊ฐ€ ์ถœ๋ ฅ๋˜๋Š”๋ฐ์š”.

const name =  'Hello React';
{name == 'Hello world' || <h1>Hello world</h1>} //true

 

undefined, null ๊ฐ’์ธ ๊ฒฝ์šฐ ๋ณด์—ฌ์ฃผ๊ณ  ์‹ถ์€ ๋ฌธ๊ตฌ๊ฐ€ ์žˆ๋‹ค! ์‹ถ์œผ๋ฉด OR์—ฐ์‚ฐ์ž๋ฅผ ์ฃผ๋กœ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. 

{undefined || <h1>undefined ์ž…๋‹ˆ๋‹ค.</h1>}

 

 

โšก  JSX ์Šคํƒ€์ผ๋ง  

• ์ธ๋ผ์ธ ์Šคํƒ€์ผ๋ง 

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ style ํƒœ๊ทธ ์•ˆ์— style="" ์œผ๋กœ ์ธ๋ผ์ธ ์Šคํƒ€์ผ์„ ์„ ์–ธํ•˜์—ฌ ์‚ฌ์šฉํ•˜๊ธฐ๋„ ํ–ˆ๋Š”๋ฐ์š”.

JSX์—์„œ๋„ ์ธ๋ผ์ธ ์Šคํƒ€์ผ๋ง์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, ๋ฌธ์ž์—ด์ด ์•„๋‹Œ "๊ฐ์ฒด" ํ˜•ํƒœ๋กœ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค :D 

 

๋งŒ์•ฝ background ์ƒ‰์ƒ์„ yellow ๋กœ ์ง€์ •ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ๊ธฐ์กด HTML ํƒœ๊ทธ์—์„œ๋Š” ์•„๋ž˜์ฒ˜๋Ÿผ ์‚ฌ์šฉํ–ˆ๋‹ค๋ฉด, 

<div style="background-color:'yellow'"></div>

 

JSX์—์„œ๋Š” "๊ฐ์ฒด"๋กœ ํ‘œํ˜„ํ•ด์•ผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์•„๋ž˜์ฒ˜๋Ÿผ ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ ์ฃผ์˜ํ•  ์ ์€, JSX๋Š” "์นด๋ฉœ ํ‘œ๊ธฐ๋ฒ•(CamelCase)"์„ ์‚ฌ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์— background-color๊ฐ€ ์•„๋‹Œ backgroundColor๋กœ ์„ ์–ธํ•ฉ๋‹ˆ๋‹ค.

const myStyle={
	backgroundColor : 'yellow'
};
<div style={myStyle}></div>

 

class๋Š” NO, className์€ OK 

์ผ๋ฐ˜์ ์ธ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ div์˜ class ์†์„ฑ์„ ์ง€์ •ํ•  ๋•Œ๋Š” <div class="myClass"></div> ๋กœ ์„ ์–ธํ•˜๊ธฐ๋„ ํ•˜๋Š”๋ฐ์š”. 

JSX ์—์„œ๋Š” className ์ด๋ผ๋Š” ์†์„ฑ์„ ์‚ฌ์šฉํ•ด class ๋ฅผ ์ง€์ •ํ•˜๋Š”๋ฐ์š”. class๊ฐ€ ์•„๋‹Œ className์„ ์“ฐ๋Š” ์ด์œ ๋Š” ๋ฆฌ์•กํŠธ์—์„œ class๋Š” ์ด๋ฏธ ์ง€์ •๋˜์–ด ์žˆ๋Š” ์˜ˆ์•ฝ์–ด์ด๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. 

<div className="myStyle">
	<h1>Hello React!</h1>
</div>