[๐ŸŽ์ฝ”๋”ฉ์• ํ”Œ ๊ฐ•์˜์š”์•ฝ] JSX ํ•ต์‹ฌ ๋ฌธ๋ฒ• 3๊ฐ€์ง€ ๐Ÿ”‘

๐ŸŒˆ KJยท2025๋…„ 5์›” 8์ผ

codingapple

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

๊ฐœ์š” ๐Ÿ“‹

JSX๋Š” React์—์„œ HTML์„ ๋Œ€์ฒดํ•˜๋Š” ๋ฌธ๋ฒ•์œผ๋กœ, ๊ธฐ์กด HTML/CSS ์ง€์‹์„ ํ™œ์šฉํ•˜์—ฌ ์›นํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. App.js๊ฐ€ ๋ฉ”์ธ ํŽ˜์ด์ง€์ด๋ฉฐ, ์—ฌ๊ธฐ์„œ ๋ ˆ์ด์•„์›ƒ์„ ๊ตฌ์„ฑํ•ฉ๋‹ˆ๋‹ค.

JSX ํ•ต์‹ฌ ๋ฌธ๋ฒ• 3๊ฐ€์ง€ ๐Ÿ”‘

1. className ์‚ฌ์šฉํ•˜๊ธฐ ๐Ÿท๏ธ

<div className="black-nav">
  <h4>๋ธ”๋กœ๊ทธ์ž„</h4>
</div>
  • HTML์˜ class ๋Œ€์‹  className์„ ์‚ฌ์šฉ
  • ์ด์œ : JSX๊ฐ€ JavaScript ๊ธฐ๋ฐ˜์ด๋ฏ€๋กœ ์˜ˆ์•ฝ์–ด์ธ 'class'๋ฅผ ํ”ผํ•ด์•ผ ํ•จ
  • CSS ํŒŒ์ผ์—์„œ ํ‰์†Œ์ฒ˜๋Ÿผ .black-nav { } ํ˜•์‹์œผ๋กœ ์Šคํƒ€์ผ ์ •์˜

2. ๋ณ€์ˆ˜๋ฅผ HTML์— ์‚ฝ์ž…ํ•˜๊ธฐ - ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ ๐Ÿ“Š

let post = '๊ฐ•๋‚จ ์šฐ๋™ ๋ง›์ง‘';
return (
  <div>{ post }</div>
)
  • ๋ณ€์ˆ˜๋ฅผ HTML์— ํ‘œ์‹œํ•  ๋•Œ { } ์ค‘๊ด„ํ˜ธ ์‚ฌ์šฉ
  • ์†์„ฑ๊ฐ’์—๋„ ์ ์šฉ ๊ฐ€๋Šฅ: <div className={๋ณ€์ˆ˜๋ช…}>
  • ๊ธฐ์กด JS๋ณด๋‹ค ๊ฐ„๋‹จํ•˜๊ฒŒ ๋ฐ์ดํ„ฐ ํ‘œ์‹œ ๊ฐ€๋Šฅ
  • ์ด ์ž‘์—…์„ '๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ'์ด๋ผ๊ณ  ํ•จ

3. ์ธ๋ผ์ธ ์Šคํƒ€์ผ ์ ์šฉํ•˜๊ธฐ ๐ŸŽจ

<div style={{ color: 'blue', fontSize: '30px' }}>๊ธ€์”จ</div>
  • ์Šคํƒ€์ผ์€ ์ด์ค‘ ์ค‘๊ด„ํ˜ธ {{ }} ์•ˆ์— ๊ฐ์ฒด ํ˜•ํƒœ๋กœ ์ž‘์„ฑ
  • CSS ์†์„ฑ๋ช…์€ ๋Œ€์‹œ(-) ๋Œ€์‹  ์นด๋ฉœ์ผ€์ด์Šค(camelCase) ์‚ฌ์šฉ
    • font-size โ†’ fontSize
  • ์†์„ฑ๊ฐ’์€ ๋ฌธ์ž์—ด๋กœ ์ž‘์„ฑ
  • CSS ํŒŒ์ผ ์—ด๊ธฐ ๊ท€์ฐฎ์„ ๋•Œ ์œ ์šฉ

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