HOWTO · React
ReactJS로 원시 HTML 렌더링
이 튜토리얼의 끝에서 반응 프레임워크 내에서 html을 렌더링하는 방법을 배우는 것을 목표로 합니다.
React 프레임워크의 다양성과 유연성은 아무리 강조해도 지나치지 않습니다. 사용자가 React 내부에서 HTML 코드를 렌더링할 수 있는 기능 덕분에 개발자가 되기 전에 React를 너무 깊이 배울 필요조차 없습니다.
HTML로 많은 코드를 작성했고 그것을 React로 가져오는 가장 빠른 방법을 찾고 있는 사람들을 위해 이 튜토리얼에서 이를 수행하는 다른 방법을 방문할 것입니다.
온라인 HTML에서 JSX로 변환기
이 방법은 영화와 노래를 다운로드하기 어려웠을 때 웹 사이트를 변환하는 온라인 미디어를 처음 발견했을 때의 추억을 불러옵니다.
웹사이트("https://transform.tools/html-to-jsx")는 순수 HTML 코드를 JSX(JavaScript Syntax Extension)로 변환하므로 반응 프레임워크 내에서 사용할 수 있습니다.
코드 조각 - App.js:
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<>
<meta charSet="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="goog.css" />
<title>Google</title>
<header>
<nav className="navi">
<div id="left">
<ul>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Stores</a>
</li>
</ul>
</div>
<div id="right">
<ul>
<li>
<a href="#">Gmail</a>
</li>
<li>
<a href="#">Images</a>
</li>
<li>
<a href="#">Social</a>
</li>
<li>
<button type="submit">Sign In</button>
</li>
</ul>
</div>
</nav>
</header>
<main id="content">
<div className="google-logo">
<img
src="googlelogo_color_272x92dp.png"
alt="google-logo"
id="logo"
width={272}
height={92}
/>
</div>
<div id="search-bar">
<input type="text" placeholder="Search or Type a URL" />
</div>
<div id="buttons">
<button type="submit">Google Search</button>
<button type="submit">I'm Feeling Lucky</button>
</div>
</main>
<footer>
<nav className="footer">
<div id="left-foot">
<ul>
<li>
<a href="#">Advertising</a>
</li>
<li>
<a href="#">Business</a>
</li>
<li>
<a href="#">How Search Works</a>
</li>
</ul>
</div>
<div id="right-foot">
<ul>
<li>
<a href="#">Privacy</a>
</li>
<li>
<a href="#">Terms</a>
</li>
<li>
<a href="#">Settings</a>
</li>
</ul>
</div>
</nav>
</footer>
</>
</div>
);
}
export default App;
.App div 내부에 코드를 래핑한 다음 여러 요소가 포함되어 있으므로 조각 안에 코드를 래핑합니다.
내장 ReactDOM.render() 메서드 사용
이 방법을 사용하면 HTML 코드를 가장 순수한 형태로 사용할 수 있습니다. ReactDOm.render()를 사용하면 지정한 HTML 코드를 표시할 수 있습니다.
또한 ReactDOM.render()는 새 React 앱을 성공적으로 생성하면 사전 설치되므로 추가 종속성이 필요하지 않습니다. ReactDOM.remder()는 가벼운 반응 앱을 만드는 데 이상적인 방법입니다.
반응 프로젝트의 index.js 파일로 이동하여 const myelement를 선언합니다.
코드 조각 - index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const myelement = (
<>
<title>Google</title>
<body>
<header>
<nav class="navi">
<div id="left">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Stores</a></li>
</ul>
</div>
<div id="right">
<ul>
<li><a href="#">Gmail</a></li>
<li><a href="#">Images</a></li>
<li><a href="#">Social</a></li>
<li><button type="submit">Sign In</button></li>
</ul>
</div>
</nav>
</header>
<main id="content">
<div class="google-logo">
<img src="googlelogo_color_272x92dp.png" alt="google-logo" id="logo" height="92" width="272"/>
</div>
<div id="search-bar">
<input type="text" placeholder="Search or Type a URL"/>
</div>
<div id="buttons">
<button type="submit">Google Search</button>
<button type="submit">I'm Feeling Lucky</button>
</div>
</main>
<footer>
<nav class="foot">
<div id="left-foot">
<ul>
<li><a href="#">Advertising</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">How Search Works</a></li>
</ul>
</div>
<div id="right-foot">
<ul>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Settings</a></li>
</ul>
</div>
</nav>
</footer>
</body>
</>
);
ReactDOM.render(myelement, document.getElementById('root'));
요소를 선언한 후에는 ReactDOM.render() 내부에 요소를 추가하고 코드를 조각 태그로 래핑해야 합니다.
dangerouslySetInnerHTML 메서드 사용
이것은 반응 프레임워크에서 원시 상태로 HTML을 렌더링하는 가장 널리 사용되는 방법입니다. 이 방법은 이 방법의 보안 취약성을 사용자에게 경고합니다.
dangerouslySetInnerHTML 방법을 사용하면 공격자가 양식 제출 웹 사이트 검색에서 보낸 데이터 내부에 악성 스크립트를 저장할 수 있습니다.
코드 조각 - App.js:
import logo from './logo.svg';
import './App.css';
const App = () => {
const data =
<body>
<header>
<nav class="navi">
<div id="left">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Stores</a></li>
</ul>
</div>
<div id="right">
<ul>
<li><a href="#">Gmail</a></li>
<li><a href="#">Images</a></li>
<li><a href="#">Social</a></li>
<li><button type="submit">Sign In</button></li>
</ul>
</div>
</nav>
</header>
<main id="content">
<div class="google-logo">
<img src="googlelogo_color_272x92dp.png" alt="google-logo" id="logo" height="92" width="272">
</div>
<div id="search-bar">
<input type="text" placeholder="Search or Type a URL">
</div>
<div id="buttons">
<button type="submit">Google Search</button>
<button type="submit">I'm Feeling Lucky</button>
</div>
</main>
<footer>
<nav class="foot">
<div id="left-foot">
<ul>
<li><a href="#">Advertising</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">How Search Works</a></li>
</ul>
</div>
<div id="right-foot">
<ul>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Settings</a></li>
</ul>
</div>
</nav>
</footer>
</body>
;
return (
<div
dangerouslySetInnerHTML={{ __html: data }}
/>
);
}
export default App;
먼저 const를 사용하여 구성 요소를 선언한 다음 백틱 안에 HTML 코드를 래핑합니다. 그런 다음 dangerouslySetInnerHTML을 선언하고 data 구성 요소를 중괄호 안에 래핑합니다.
결론
이 방법은 엄격한 과정을 거치지 않고도 React에 익숙해지는 흥미진진한 경로를 만듭니다. 그러나 이러한 접근 방식의 단점은 코드가 늘어나는 결과를 가져오므로 처음에 반응 프레임워크를 생성해야 하는 실제 이유를 어떻게든 무효화합니다.
