๋ฐ˜์‘ํ˜•

React๊ณต๋ถ€ 1
[React] ๋ฆฌ์•กํŠธ innerHtml ํ‘œ์‹œํ•˜๊ธฐ (dangerouslySetInnerHTML)์‚ฌ์šฉ ์ฃผ์˜์  ๋ฐ ๋ณด์•ˆ ๋ฐฉ๋ฒ•

Intro ์•ˆ๋…•ํ•˜์„ธ์š”. ๋ฆฌ์•กํŠธ์—์„œ innerHtml์„ ํ‘œ์‹œํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ตœ๊ทผ์— ์Šค๋งˆํŠธ์—๋””ํ„ฐ ๊ด€๋ จํ•œ ์ž‘์—…์„ ์ง„ํ–‰ํ•˜๊ณ  ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์—๋””ํ„ฐ์— ์ €์žฅ๋œ ๋‚ด์šฉ์ด ๊ทธ๋Œ€๋กœ html tag๋กœ ์ €์žฅ๋˜๊ณ , ์ €์žฅ๋œ html tag๋ฅผ ๊ทธ๋Œ€๋กœ ํ™”๋ฉด์— ํ‘œ์‹œํ•ด์•ผ ํ–ˆ์ฃ . ์ €์žฅ๋œ ์ด innerHtml๋ฅผ ์–ด๋–ป๊ฒŒ ํ‘œ์‹œํ•ด์•ผ ํ• ๊นŒ์š”? ํ•จ๊ป˜ ์•Œ์•„๋ด…์‹œ๋‹ค :) How to solve the problem React์—์„œ innerHtml๋ฅผ ํ‘œ์‹œํ•˜๋Š” ์œ„ํ•ด์„œ๋Š” ์•„๋ž˜ ์ฝ”๋“œ์™€ ๊ฐ™์ด dangerouslySetInnerHTML๋ฅผ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. import React from 'react'; function MyComponent() { const sampleHtml = 'Hello world! '; return ( ); } ์—ฌ๊ธฐ์„œ da..
Framework/React 2023.04.06
1
๋”๋ณด๊ธฐ
๋ฐ˜์‘ํ˜•

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”