๐Ÿ‘ฉ‍๐Ÿ’ป๊ฐœ๋ฐœ_TIL/์—๋Ÿฌ

[๋ฆฌ์•กํŠธ]Invalid DOM property class. Did you mean className?

Daisy.lee 2021. 12. 13. 13:56

JSX๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์ผ๋ถ€์ด๋ฏ€๋กœ class๋ผ๋Š” ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ด๋ฏธ ์กด์žฌํ•˜๋Š” class ๋ฌธ๋ฒ•๊ณผ ์ค‘๋ณต๋ฉ๋‹ˆ๋‹ค.

๋”ฐ๋ผ์„œ HTML ํƒœ๊ทธ์— ํด๋ž˜์Šค๋ช…์„ ์ง€์–ด์ค„ ๋•Œ๋Š” className์œผ๋กœ ์ž‘์„ฑํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

https://bit.ly/3nkoLZb

 

[React] JSX์˜ค๋ฅ˜ํ•ด๊ฒฐ - Warning: Invalid DOM property `class`. Did you mean `className`?

React๋ฅผ ํ™œ์šฉํ•œ ๊ฐœ๋ฐœ์„ ์ง„ํ–‰ํ•˜๋ฉด์„œ JSX๋Š” javaScript์ด๋ฏ€๋กœ class์˜ ๋‹ค๋ฅธ ์˜๋ฏธ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฌด๋ฃŒํ…œํ”Œ๋ฆฟ์ด๋‚˜ ํผ๋ธ”๋ฆฌ์‹ฑ ์ž‘์—…์„ ์ „๋‹ฌ๋ฐ›์•˜์„ ๋•Œ JSX์—์„œ class์˜ ์˜ค๋ฅ˜๋ฅผ ๋ณด๊ฒŒ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. HTML ํƒœ๊ทธ ์†์„ฑ์„

mandlife.tistory.com

App.js๋ฅผ ํ™•์ธํ•ด๋ณด๋‹ˆ, ์ œ๊ฐ€ Bootstrap์—์„œ ์‚ฌ์šฉํ•œ NavBar์˜ ํƒœ๊ทธ๊ฐ€ class๋กœ ์ž‘์„ฑ๋˜์—ˆ๋‹ค๋Š” ๊ฒƒ์„ ํ™•์ธํ–ˆ์Šต๋‹ˆ๋‹ค.

Bootstrap ์‚ฌ์ดํŠธ์—์„œ ํ™•์ธํ•ด ๋ณธ ๊ฒฐ๊ณผ, ๊ฑฐ์˜ ๋Œ€๋ถ€๋ถ„์˜ UI๋“ค์ด class๋กœ ๋˜์–ด ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

๋”ฐ๋ผ์„œ JSX์— ๋”ฐ๋ผ ์ ์šฉํ•  ๋•Œ๋Š” class๋ฅผ className์œผ๋กœ ๋ฐ”๊พธ์–ด์ฃผ์–ด์•ผ ํ•  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.