200204 React

React 

프로젝트 시작 (C:\react 디렉토리에서 실행했음)

npm i create-react-app

npx create-react-app hello-react

cd hello-react

npm start

리액트 라이브러리 (page 5)

1. 파일들을 C:\react\hello-world 에 저장

https://unpkg.com/react@16.12.0/umd/react.development.js

https://unpkg.com/react@16.12.0/umd/react.production.min.js

https://unpkg.com/react-dom@16.12.0/umd/react-dom.development.js

https://unpkg.com/react-dom@16.12.0/umd/react-dom.production.min.js

- development => 개발 환경에서 사용하는 파일

- production => 실행(배포) 환경에서 사용하는 파일

- react => 플랫폼 구분 없이 공통으로 사용하는 파일 (리액트 코어)

- react-dom => 웹 환경에서 사용되는 파일

2. 리액트로 좋아요 토글을 구현

    <script>

        class LikeButton extends React.Component {

            constructor(props) {

                super(props);

                this.state = { liked: false };

            }

            render() {

                const text = this.state.liked ? '좋아요 취소' : '좋아요';

                return React.createElement(

                    'button',

                    { onClick: () => this.setState({ 

liked: !this.state.liked 

}) 

},

                    text,

                );

            }

        }

        const domContainer = document.querySelector('#react-root');

        ReactDOM.render(React.createElement(LikeButton), domContainer);

    </script>

2-1. jQuery로 좋아요 토글을 구현한다면

    <script>

        $(document).ready(function() {

            let liked = false;

            $('button').click(function() {

                if (liked) $(this).text("좋아요 취소");

                else $(this).text("좋아요");

                liked = !liked;

            })

            $('button').trigger('click')

        })

    </script>

3. React 좋아요 버튼을 여러개 구현

   <script>
        class LikeButton extends React.Component {
            constructor(props) {
                super(props);
                this.state = { liked: false };
            }
            render() {
                const text = this.state.liked ? '좋아요 취소' : '좋아요';
                return React.createElement(
                    'button',
                    { onClick: () => { 
                        console.log(this.state.liked); 
                        this.setState({ liked: !this.state.liked }); 
                    } },
                    text,
                );
            }
        }
        
        ReactDOM.render(React.createElement(LikeButton), document.querySelector('#react-root1'));
        ReactDOM.render(React.createElement(LikeButton), document.querySelector('#react-root2'));
        ReactDOM.render(React.createElement(LikeButton), document.querySelector('#react-root3'));
    </script>
 

3-1. jQuery 좋아요 버튼을 여러개 구현

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script>

        $(document).ready(function() {

            let liked1 = false;

            let liked2 = false;

            let liked3 = false;

            $('button#btn1').click(function() {

                if (liked1) $(this).text("좋아요 취소");

                else $(this).text("좋아요");

                liked1 = !liked1;

            })

            $('button#btn2').click(function() {

                if (liked2) $(this).text("좋아요 취소");

                else $(this).text("좋아요");

                liked2 = !liked2;

            })

            $('button#btn3').click(function() {

                if (liked3) $(this).text("좋아요 취소");

                else $(this).text("좋아요");

                liked3 = !liked3;

            })

            $('button#btn1').trigger('click')

            $('button#btn2').trigger('click')

            $('button#btn3').trigger('click')

        })

    </script>

4. React 증가, 감소 버튼 구현

class LikeButton extends React.Component {
    constructor(props) {
        super(props);
        this.state = { liked: false };
    }
    render() {
        const text = this.state.liked ? '좋아요 취소' : '좋아요';
        return React.createElement(
            'button',
            { onClick: () => this.setState({ liked: !this.state.liked }) },
            text,
        );
    }
}
// P9 코드1-6 참조
class Container extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
    }
    render() {
        return (
            <div>
                <likeButton />
                <div style={{ marginTop: 20 }}>
                    <span>현재 카운트: </span>
                    <span>{this.state.count}</span>
                    <button onClick={() => this.setState({count: this.state.count + 1})}>증가</button>
                    <button onClick={() => this.setState({count: this.state.count + 1})}>감소</button>
                </div>
            </div>
        )
    }
}
 
ReactDOM.render(
    React.createElement(Container),
    document.querySelector('#react-root')
);

Babel

JSX -> ES5 컴파일러

npm install @babel/core @babel/cli @babel/preset-react

npx babel --watch src --out-dir . --presets @babel/preset-react

Webpack

fashion