[React] 기존 웹사이트에 리액트 적용하기(간단)

인프런에서 기초 리액트 강의를 들으며 잊어버리지 않으려고 실습 파일들을 기록해 두려 한다.

⬜ HTML

<h1>리액트를 사용하기 위한 사이트입니다.</h1>

<div id="root"></div><!--DOM Container(Root DOM Node) 추가-----버츄얼 돔의 시작점-->

<!-- 리액트 가져오기 -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

<!-- 리액트 컴포넌트 가져오기 -->
<script src="js/Mybutton.js"></script>

⬜ JS

function Mybutton(props) {
    const [isClicked, setIsClicked] = React.useState(false);

    return React.createElement(
        'button',
        { onClick: () => setIsClicked(true) },
        isClicked ? 'Clicked!' : 'Click here!'
    )
}//리액트의 함수 컴포넌트

//리액트 돔에 render 함수를 사용해서 리액트 컴포넌트를 돔 컨테이너에 렌더링하는 코드
//이 코드가 필요한 이유->스크립트 태그를 사용해서 컴포넌트를 가져왔다고 해도, 컴포넌트가 화면에 보이는 것이 아니기 때문에!
const domContainer = document.querySelector('#root');
ReactDOM.render(React.createElement(Mybutton), domContainer);

⚡ 출력화면