[React] 게임으로 배우는 리액트 - 바벨(babel)

728x90

<html>
    <head>
        <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    </head>
    <body>
        <div id="root"></div>
        <script>
            const e = React.createElement;

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

                render(){
                    return e('button', { onClick: () => {this.setState({liked : true})}, type: 'submit'}, 
                    this.state.liked === true ? 'Liked' : 'Like',
                    );
                }
            }
        </script>
        <script>
            ReactDOM.render(e(LikeButton), document.querySelector('#root'));
        </script>
    </body>
</html>

위의 코드는 앞선 포스팅에서의 코드입니다.

근데 한눈에 봐도 보기가 상당히 좋지 않습니다.

return e('button', null, 'Like');

이와 같은 형식이 아닌

이처럼 태그 형식을 사용할수 있도록 개선이 되었습니다.

바로 바벨을 사용하는 방법인데요.

<html>
    <head>
        <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
        <!-- babel을 사용하기 위해서는 해당 스크립트를 넣어주어야한다. -->
    </head>
    <body>
        <div id="root"></div>
        <script type="text/babel">
        // 바벨을 사용하기 위해서는 스크립트 구문 안에 type="text/babel"을 널어준다
            class LikeButton extends React.Component{
                constructor(props){
                    super(props)
                    this.state = {
                        liked : false
                    };
                }

                render(){
                    return <button type="submit" onClick={() => {this.setState({liked : true})}}>
                        {this.state.liked === true ? 'Liked' : 'Like'}
                    </button>
                    // JSX라고 부른다. (JS + XML)
                    // content안에 중괄호로 묶어주면 그안에서 자바스크립트를 사용할수 있다.
                }
            }
        </script>
        <script type="text/babel">
            ReactDOM.render(<LikeButton />, document.querySelector('#root'));
            // HTML이 아니기 떄문에 닫는 괄호를 반드시 써주어야함
        </script>
    </body>
</html>

바벨을 사용하여 이렇게 코드를 변경했습니다.

변경된 부분을 자세히 볼까요??

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

우선 바벨을 사용하기 위해서는 해당 스크립트를 넣어주어야합니다.

<script type="text/babel">

또한 script를 사용할 부분에서 type="text/babel"을 넣어주어야 태그 형식을 사용할수 있게됩니다.

단, HTML태그들의 속성을 작성할때 class대신 className을 사용해야합니다.

JavaScript엔진이 class를 작성할떄의 calss와 속성의 class를 구분할수 없기 때문이죠!

또한 for은 htmlFor로 바꾸어서 사용해야합니다

return <button type="submit" onClick={() => {this.setState({liked : true})}}>
    {this.state.liked === true ? 'Liked' : 'Like'}
</button>

return부분을 이렇게 태그형식으로 바꾸었습니다.

상태에 관한 구문은 {}안에 감싸서 텍스트 부분에 써주었습니다.

content안에 중괄호로 묶어주면 중괄호 안에서 자바스크립트를 사용할수 있게됩니다.

또한 이러한 리액트 파일은 보통 JSX확장자를 가지는데 JSX는 JS와 XML의 합성어입니다.

그렇기 때문에 end 태그가 없는 단일 태그의 끝에 반드시 /가 붙어야합니다.

해당 코드를 실행하고 버튼을 누른 모습입니다.

버튼을 여러개 써야한다면 어떻게 해야할까요??

<script type="text/babel">
    ReactDOM.render(<div><LikeButton /><LikeButton /><LikeButton /></div>, document.querySelector('#root'));
</script>

이처럼 ReactDOM안에 만들어두었던 LikeButton을 어려개 사용하면 됩니다!

버튼은 또 개별 동작합니다!

이 버튼들을 <div>로 감싸지 않으면 에러가 발생해서 <div>태그로 감싸주어야합니다.

728x90

'SPA > React' 카테고리의 다른 글

[React] 게임으로 배우는 리액트 - Fragment, setState (0)	2022.05.27
[React] 게임으로 배우는 리액트 - 구구단게임 만들기 (0)	2022.05.26
[React] 게임으로 배우는 리액트 - 기본 문법(class, state, render()) (0)	2022.05.24
[React] 리액트를 왜 사용할까? (0)	2022.05.23
[React] Hello, React! 리엑트 서버 띄우기 (2)	2022.05.22

'SPA > React' 카테고리의 다른 글

티스토리툴바