📝
프론트엔드 스쿨 교안(1기)/
📝
React(Front-end)/
📝
그래서? 왜 사용하는거야?
📝

그래서? 왜 사용하는거야?

  • 다음 코드를 타이핑 해봅시다. 앞으로 우리가 해야할 가장 중요한 내용이 여기 담겨있습니다.
  • 바벨을 사용하지 않으면 최신 문법을 사용할 수 없습니다.
  • 여기서 <main/> 등의 태그가 JSX 문법으로 사용됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello world</title>
</head>
<body>
    <!-- <div>header
        <div>menu</div>
    </div>
    
    <div>main
        <h1>hello world 002.html</h1>
        <p>hello world 002.html</p>
    </div>
    
    <div>product
        div*20(best seller 옷)
    </div>
    
    <div>footer</div> -->
    <div id="root"></div>

    <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="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js" integrity="sha512-kp7YHLxuJDJcOzStgd6vtpxr4ZU9kjn77e6dBsivSz+pUuAuMlE2UTdKB7jjsWT84qbS8kdCWHPETnP/ctrFsA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script type="text/babel">
        class Body extends React.Component{
            render(){
                return(
                    <div>
                        <h1>body h1이다!</h1>
                        <Header/>
                        <Main/>
                        <Product/>
                        <Footer/>
                    </div>
                )
            }
        }

        class Header extends React.Component{
            render(){
                return(
                    <div>
                        <h1>header</h1>
                        <div>menu</div>
                    </div>
                )
            }
        }

        class Main extends React.Component{
            render(){
                return(
                    <div>
                        <h1>main</h1>
                        <h3>hello world</h3>
                        <p>hello world</p>
                    </div>
                )
            }
        }

        class Product extends React.Component{
            render(){
                return(
                    <div>
                        <h1>product</h1>
                        div*20(best seller 옷)
                    </div>
                )
            }
        }

        class Footer extends React.Component{
            render(){
                return(
                    <div>
                        <h1>footer</h1>
                    </div>
                )
            }
        }

        const domContainer = document.querySelector('#root');
        ReactDOM.render(<Body/>, domContainer);
        console.dir(ReactDOM);
    </script>
</body>
</html>
 
맨 마지막 코드를 아래와 같이 만들어보세요.
ReactDOM.render(<div><Body/><Body/><Body/></div>, domContainer);
 
앞에 코드도 다듬어 보겠습니다.
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>리액트 1분만에 추가해보기!</title>
</head>
<body>
    <h1>내 html에 리액트 1분만에 추가해보기!</h1>
    <p>단 1분만에 설치없이 리액트를 추가할 수 있다구요?</p>
    <div id="root"></div>
    <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="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js" integrity="sha512-kp7YHLxuJDJcOzStgd6vtpxr4ZU9kjn77e6dBsivSz+pUuAuMlE2UTdKB7jjsWT84qbS8kdCWHPETnP/ctrFsA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<script type="text/babel">
        class HelloButton extends React.Component {
            constructor(props) {
                super(props);
                this.state = { liked: false };
            }

            render() {
                if (this.state.liked) {
                    return 'Hello World!';
                }

                return <button onClick={ () => 
                    {
                        this.setState({ liked: true });
                        for (let i = 0; i < 10; i++) {
                            console.log(`hello world ${i}`);        
                        }
                    }
                }>클릭해!</button>
            }
        }
        // DOM에 리액트 컴포넌트 랜더링하기
        const domContainer = document.querySelector('#root');
        ReactDOM.render(<HelloButton/>, domContainer);
    </script>
</body>
</html>