React: ์Šคํฌ๋ฆฝํŠธ ํƒœ๊ทธ๋กœ React๊ฐ€ ์‹คํŒจํ•ฉ๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2015๋…„ 04์›” 11์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: facebook/react

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();
`}} />

๋ชจ๋“  3 ๋Œ“๊ธ€

๋” ์ž์„ธํ•˜๊ฒŒ ์–˜๊ธฐํ•ด ์ฃผ ์‹œ๊ฒ ์–ด์š”? ๋ฌด์Šจ ์ผ์ด ์ผ์–ด๋‚  ๊ฒƒ์ด๋ผ๊ณ  ์˜ˆ์ƒํ–ˆ์Šต๋‹ˆ๊นŒ? ๋Œ€์‹  ๋ฌด์Šจ ์ผ์ด?

๋‹น์‹ ์€ ์•„๋งˆ ์ด๊ฒƒ์„ ์›ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๊ทธ๋ ‡๋‹ค ํ•˜๋”๋ผ๋„ ์Šคํฌ๋ฆฝํŠธ๋Š” ์‹คํ–‰๋˜์ง€ ์•Š์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค(๋Œ€๋ถ€๋ถ„์˜ ๋ธŒ๋ผ์šฐ์ €๋Š” innerHTMLed์ผ ๋•Œ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‹คํ–‰ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

<script dangerouslySetInnerHTML={{__html: `
  alert();
`}} />

๋‹ฌ์ฝคํ•œ, ๊ทธ๊ฒƒ์€ ํšจ๊ณผ๊ฐ€์žˆ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค! ๊ทธ๊ฒƒ์€ type="x-shader/x-vertex" ๋“ฑ์ด๋ฏ€๋กœ ๋ธŒ๋ผ์šฐ์ €๋Š” ์–ด์จŒ๋“  ๊ทธ๊ฒƒ์„ ์ฝ์ง€ ์•Š์•„์•ผํ•ฉ๋‹ˆ๋‹ค. ๋‚˜์ค‘์— (componentDidMount) ์žก์•„์„œ ์…ฐ์ด๋”๋ฅผ ์ปดํŒŒ์ผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์•„์ด๋Ÿฌ๋‹ˆํ•˜๊ฒŒ๋„ JSX ์™ธ๋ถ€์—์„œ ํ…œํ”Œ๋ฆฟ ๋ฌธ์ž์—ด์„ ์‚ฌ์šฉํ•˜๊ฒŒ ๋˜์—ˆ๊ณ  Vim์—์„œ ๊ตฌ๋ฌธ ๊ฐ•์กฐ ํ‘œ์‹œ๊ฐ€ ๋‚˜ํƒ€๋‚˜๋ฏ€๋กœ ํ›จ์”ฌ ๋” ์ข‹์Šต๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰