REACT CDN을 활용해 사용해보기

React를 활용해 빠르게 React를 사용해보는 법입니다.

HTML태그에 위의 Script를 넣어주면 HTML 내에서 빠르게 React를 사용해 볼 수 있습니다.

React는 render를 통해 html태그에 직접 태그를 넣지 않고도 html태그를 작성할 수 있습니다.

<script>
    const root = document.getElementById("root")
    const span = React.createElement("span", { id: "First_react_property" }, "First_react_content");
    ReactDOM.render(span, root)
</script>

위의 CDN을 입력해 준 뒤 script를 넣어줍니다.

HTML태그에는 id가 root인 div 하나만 만들어주시면 됩니다.

이 문구 하나만 넣어주면

span태그는 div안에 쏙 들어가 rendering이 되게 됩니다.

React의 createElement에는 3가지 인자가 들어갑니다.

1. Tag이름 2. property 3.Content

Property에 id를 설정해 주거나 Event를 등록할 수도 있습니다.

 <script>
        const root = document.getElementById("root")
        const span = React.createElement("span", { id: "First_react_property", style: { color: 'red' } }, "First_react_content");
        const btn = React.createElement("button", { onClick: () => console.log("I'm clicked") }, "Click me");
        const div = React.createElement("div", null, [span, btn])
        ReactDOM.render(div, root)
    </script>

이렇게 btn 태그에 onClick 이벤트를 넣고, span과 btn 모두를 div의 Content에 List형식으로 넣어준뒤 rendering 시켜줄 수도 있습니다.

이렇게 Event Listner Property를 넣어주더라도 id값과는 다르게 HTML 요소에는 나오지 않습니다.

React JS를 사용하면 좀 더 깔끔한 HTML태그들을 볼 수 있을 것 같다는 확신이 드는 순간입니다.