리액트 설치 및 기본

공식사이트 : https://ko.reactjs.org/docs/add-react-to-a-website.html#add-react-in-one-minute    

 

리액트 코드는 단 2줄이면 끝이 납니다.

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

 

그리고 기본형은 다음과 같습니다.

<meta charset="UTF-8" />
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

<div id="like_button_container"></div>

<script>

    const e = React.createElement;

    class LikeButton extends React.Component {
        constructor(props) {
            super(props);
            this.state = { liked: false };
        }

        render() {
            if (this.state.liked) {
            return 'You liked this.';
            }

            return e(
            'button',
            { onClick: () => this.setState({ liked: true }) },
            'Like'
            );
        }
    }

    const domContainer = document.querySelector('#like_button_container');
    const root = ReactDOM.createRoot(domContainer);
    root.render(e(LikeButton));

</script>

 

먼저 아래 문장으로 루트를 지정합니다.

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);

 

그리고, 선언한 컴포넌트를 루트에 렌더링합니다.

root.render(e(LikeButton));

 

선언된 컴포넌트는 버튼인데 클릭시 버튼이 사라지고 'You Liked this'버튼으로 바뀝니다. 이 기능의 핵심은 'this.state = { liked: false };'의 state 값을 변경시키는데 있습니다.