React๊ฐ ์ด๊ฒ์ ์ข์ํ์ง ์์ต๋๋ค:
render: function() {
return (
<div class="gl-map-container">
<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;
void main(void) {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
}
</script>
<canvas width='500' height='500' className="gl-map-canvas">
</canvas>
</div>
);
}
ํด๊ฒฐ ๋ฐฉ๋ฒ์ ๋ฌด์์ ๋๊น?
๋ ์์ธํ๊ฒ ์๊ธฐํด ์ฃผ ์๊ฒ ์ด์? ๋ฌด์จ ์ผ์ด ์ผ์ด๋ ๊ฒ์ด๋ผ๊ณ ์์ํ์ต๋๊น? ๋์ ๋ฌด์จ ์ผ์ด?
๋น์ ์ ์๋ง ์ด๊ฒ์ ์ํ ๊ฒ์ ๋๋ค. ๊ทธ๋ฌ๋ ๊ทธ๋ ๋ค ํ๋๋ผ๋ ์คํฌ๋ฆฝํธ๋ ์คํ๋์ง ์์ ๊ฒ์ ๋๋ค(๋๋ถ๋ถ์ ๋ธ๋ผ์ฐ์ ๋ innerHTMLed์ผ ๋ ์คํฌ๋ฆฝํธ๋ฅผ ์คํํ์ง ์์ต๋๋ค.
<script dangerouslySetInnerHTML={{__html: `
alert();
`}} />
๋ฌ์ฝคํ, ๊ทธ๊ฒ์ ํจ๊ณผ๊ฐ์์ ๊ฒ์
๋๋ค! ๊ทธ๊ฒ์ type="x-shader/x-vertex"
๋ฑ์ด๋ฏ๋ก ๋ธ๋ผ์ฐ์ ๋ ์ด์จ๋ ๊ทธ๊ฒ์ ์ฝ์ง ์์์ผํฉ๋๋ค. ๋์ค์ (componentDidMount) ์ก์์ ์
ฐ์ด๋๋ฅผ ์ปดํ์ผํ ์ ์์ต๋๋ค. ์์ด๋ฌ๋ํ๊ฒ๋ JSX ์ธ๋ถ์์ ํ
ํ๋ฆฟ ๋ฌธ์์ด์ ์ฌ์ฉํ๊ฒ ๋์๊ณ Vim์์ ๊ตฌ๋ฌธ ๊ฐ์กฐ ํ์๊ฐ ๋ํ๋๋ฏ๋ก ํจ์ฌ ๋ ์ข์ต๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
๋น์ ์ ์๋ง ์ด๊ฒ์ ์ํ ๊ฒ์ ๋๋ค. ๊ทธ๋ฌ๋ ๊ทธ๋ ๋ค ํ๋๋ผ๋ ์คํฌ๋ฆฝํธ๋ ์คํ๋์ง ์์ ๊ฒ์ ๋๋ค(๋๋ถ๋ถ์ ๋ธ๋ผ์ฐ์ ๋ innerHTMLed์ผ ๋ ์คํฌ๋ฆฝํธ๋ฅผ ์คํํ์ง ์์ต๋๋ค.