순수 HTML 문서로 React.js 프로그래밍

  • 14 minutes to read

순수 HTML 문서로 React.js 프로그래밍 시작

코드: HelloReact00.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <h1>Hello, React.js!</h1>
</body>
</html>

React.js 관련 JavaScript 라이브러리 포함

코드: HelloReact01.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello React 01</title>
    <script crossorigin="anonymous" src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/javascript">
        ReactDOM.render(React.createElement("h1", null, "안녕하세요."), document.getElementById("root"));
    </script>
</body>
</html>

태그의 속성에 속성 값 주기

코드: HelloReact02.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello React 02</title>
    <script crossorigin="anonymous" src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/javascript">
        ReactDOM.render(
            React.createElement("h1", { "style": { "color": "blue"} }, "안녕하세요."), 
            document.getElementById("root")
        );
    </script>
</body>
</html>

중첩된 HTML 요소 작성

코드: HelloReact03.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello React 03</title>
    <script crossorigin="anonymous" src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/javascript">
        ReactDOM.render(
            React.createElement(
                "div", { "style": { "border": "1px solid red " } }, 
                React.createElement("h1", { "style": { "color": "blue"} }, "안녕하세요."), 
                React.createElement("h2", { "style": { "color": "red"} }, "안녕하세요."), 
                React.createElement("h3", { "style": { "color": "green"} }, "안녕하세요."), 
            ),              
            document.getElementById("root")
        );
    </script>
</body>
</html>

Babel을 사용하여 JSX를 사용한 태그 생성

코드: HelloReact04.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello React 04</title>
    <script crossorigin="anonymous" src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        // JSX를 사용하여 HTML을 JavaScript로 변환
        ReactDOM.render(
            <div><h1>안녕하세요.</h1></div>,              
            document.getElementById("root")
        );
    </script>
</body>
</html>

JSX의 여러 가지 특징 살펴보기

JSX의 HTML 태그는 반드시 시작과 끝이 명확해야 합니다.

코드: HelloReact05.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello React 05 - JSX</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script crossorigin="anonymous" src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        ReactDOM.render((
                <div className="container mb-2">
                    <div className="row">
                        <div className="col-2">
                            C#
                        </div>
                        <div className="col-10">
                            내용
                        </div>
                    </div>
                </div>
            ),              
            document.getElementById("root")
        );
    </script>
</body>
</html>

JSX 표현식 사용하기

코드: HelloReact06.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello React 06 - JSX Expression</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script crossorigin="anonymous" src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        let title = "JSX 표현식(Expression)";

        let seeSharp = {
            title: "C#",
            description: "내용 들어오는 곳..."
        };

        ReactDOM.render((
                <div className="container mb-2">
                    <div className="row">
                        <div className="col-12">
                            {title}    
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-2">
                            {seeSharp.title}
                        </div>
                        <div className="col-10">
                            {seeSharp.description}
                        </div>
                    </div>
                </div>
            ),              
            document.getElementById("root")
        );
    </script>
</body>
</html>

함수 컴포넌트 만들기

코드: HelloReact07.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello React 07 - Function Component</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script crossorigin="anonymous" src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">

        let title = "JSX 표현식(Expression)";

        let seeSharp = {
            title: "C#",
            description: "내용 들어오는 곳..."
        };

        function BookTitle() {
            return (
                <div className="row">
                    <h1>My Book</h1>
                </div>
            );
        }

        const BookFooter = () => <p>제가 집필한 책 목록입니다.</p>;

        const Copyright = () => {
            return (<p>Copyright &copy;</p>);
        }

        ReactDOM.render((
                <div className="container mb-2">
                    <BookTitle />
                    <div className="row">
                        <div className="col-12">
                            {title}    
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-2">
                            {seeSharp.title}
                        </div>
                        <div className="col-10">
                            {seeSharp.description}
                        </div>
                    </div>
                    <BookFooter />
                    <Copyright /> 
                </div>
            ),              
            document.getElementById("root")
        );
    </script>
</body>
</html>

동적 개체인 props를 사용하여 컴포넌트에 전달된 속성 이름과 속성 값을 받아 사용하기

코드: HelloReact08.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello React 08 - Props</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script crossorigin="anonymous" src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">

        let title = "JSX 표현식(Expression)";

        let seeSharp = {
            title: "C# 교과서",
            description: "내용 들어오는 곳..."
        };

        function BookTitle() {
            return (
                <div className="row">
                    <h1>My Book</h1>
                </div>
            );
        }

        const BookFooter = () => <p>제가 집필한 책 목록입니다.</p>;

        const Copyright = () => {
            return (<p>Copyright &copy;</p>);
        }

        function BookCard(props) {
            console.log(Object.keys(props)); 
            return (
                <div className="container mb-2">
                    <div className="row">
                        <div className="col-12">
                            {props.title}
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-2">
                            {props.title}
                        </div>
                        <div className="col-10">
                            {props.description}
                        </div>
                    </div>
                </div>
            );
        }

        function BookList() {
            return (
                <>
                    <BookCard title={seeSharp.title} description={seeSharp.description} /> 
                    <BookCard title="ASP.NET &amp; Core를 다루는 기술" description="ASP.NET &amp; Core를 다루는 기술 책입니다." /> 
                </>
            );
        }

        function BookApp() {
            return (
                <>
                    <BookTitle />
                    <BookList /> 
                    <BookFooter />
                    <Copyright /> 
                </>
            );
        }

        // 최종 렌더링
        ReactDOM.render(
            <BookApp />,              
            document.getElementById("root")
        );
    </script>
</body>
</html>

구조 분해 할당을 사용하여 props를 좀 더 간결하게 사용하기

코드: HelloReact09.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello React 09 - 구조 파괴(분해) 할당(Destructuring Assignment)</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script crossorigin="anonymous" src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <!-- <script src="./babel.min.js"></script> -->
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        let title = "구조 파괴 할당(튜플 분해)";

        let seeSharp = {
            title: "C# 교과서",
            description: "내용 들어오는 곳..."
        };

        function BookTitle() {
            return (
                <div className="row">
                    <h1>My Book</h1>
                </div>
            );
        }

        const BookFooter = () => <p>제가 집필한 책 목록입니다.</p>;

        const Copyright = () => {
            return (<p>Copyright &copy;</p>);
        }

        function BookCardOther(props) {
            //console.log(props); 
            console.log(Object.keys(props)); 
            return (
                <div className="container mb-2">
                    <div className="row">
                        <div className="col-12">
                            {props.title}
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-2">
                            {props.title}
                        </div>
                        <div className="col-10">
                            {props.description}
                        </div>
                    </div>
                </div>
            );
        }

        // 구조 파괴 할당 
        function BookCard({ title, description, price }) {
            return (
                <div className="container mb-2">
                    <div className="row">
                        <div className="col-12">
                            {title}
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-2">
                            {title}
                        </div>
                        <div className="col-10">
                            {description} 
                            <hr />
                            { price + '원' }
                        </div>
                    </div>
                </div>
            );
        }

        function BookList() {
            return (
                <>
                    <BookCard title={seeSharp.title} description={seeSharp.description} price={ 30000 } /> 
                    <BookCard title="ASP.NET &amp; Core를 다루는 기술" description="ASP.NET &amp; Core를 다루는 기술 책입니다." price={ 55000 } /> 
                </>
            );
        }

        function BookApp() {
            return (
                <>
                    <BookTitle />
                    <BookList /> 
                    <BookFooter />
                    <Copyright /> 
                </>
            );
        }

        // 최종 렌더링
        ReactDOM.render(
            <BookApp />,              
            document.getElementById("root")
        );
    </script>
</body>
</html>

JSX에서 조건(3항) 연산자 사용하기

코드: HelloReact10.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello React 10 - JSX에서 조건(3항) 연산자 사용하기</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script crossorigin="anonymous" src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <!-- <script src="./babel.min.js"></script> -->
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        let title = "조건(3항) 연산자 사용하기";

        let seeSharp = {
            title: "C# 교과서",
            description: "내용 들어오는 곳..."
        };

        function BookTitle() {
            return (
                <div className="row">
                    <h1>My Book</h1>
                </div>
            );
        }

        const BookFooter = () => <p>제가 집필한 책 목록입니다.</p>;

        const Copyright = () => {
            return (<p>Copyright &copy;</p>);
        }

        function BookCardOther(props) {
            //console.log(props); 
            console.log(Object.keys(props)); 
            return (
                <div className="container mb-2">
                    <div className="row">
                        <div className="col-12">
                            {props.title}
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-2">
                            {props.title}
                        </div>
                        <div className="col-10">
                            {props.description}
                        </div>
                    </div>
                </div>
            );
        }

        // 구조 파괴 할당 
        function BookCard({ title, description, price }) {
            return (
                <div className="container mb-2">
                    <div className="row">
                        <div className="col-12">
                            {title}
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-2">
                            {title}
                        </div>
                        <div className="col-10">
                            {description} 
                            <hr />
                            { price + '원' }
                        </div>
                    </div>
                </div>
            );
        }

        function BookListOther(props) {
            if (props.sortOrder === "ASC") {
                return (
                    <>
                        <BookCard title="ASP.NET &amp; Core를 다루는 기술" description="ASP.NET &amp; Core를 다루는 기술 책입니다." price={ 55000 } /> 
                        <BookCard title={seeSharp.title} description={seeSharp.description} price={ 30000 } /> 
                    </>
                );
            }
            else {
                return (
                    <>
                        <BookCard title={seeSharp.title} description={seeSharp.description} price={ 30000 } /> 
                        <BookCard title="ASP.NET &amp; Core를 다루는 기술" description="ASP.NET &amp; Core를 다루는 기술 책입니다." price={ 55000 } /> 
                    </>
                );
            }
        }

        function BookList(props) {
            return (
                <>
                    {
                        (props.sortOrder === "ASC") 
                    ? 
                        <>
                        <BookCard title="ASP.NET &amp; Core를 다루는 기술" description="ASP.NET &amp; Core를 다루는 기술 책입니다." price={ 55000 } /> 
                        <BookCard title={seeSharp.title} description={seeSharp.description} price={ 30000 } /> 
                        </>
                    : 
                        <>
                        <BookCard title={seeSharp.title} description={seeSharp.description} price={ 30000 } /> 
                        <BookCard title="ASP.NET &amp; Core를 다루는 기술" description="ASP.NET &amp; Core를 다루는 기술 책입니다." price={ 55000 } /> 
                        </>
                    }
                </>
            );
        }

        function BookApp() {
            return (
                <>
                    <BookTitle />
                    <BookList sortOrder="DESC" /> 
                    <BookFooter />
                    <Copyright /> 
                </>
            );
        }

        // 최종 렌더링
        ReactDOM.render(
            <BookApp />,              
            document.getElementById("root")
        );
    </script>
</body>
</html>

클래스로 컴포넌트 만들기

코드: HelloReact11.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello React 11 - 클래스 컴포넌트</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script crossorigin="anonymous" src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <!-- <script src="./babel.min.js"></script> -->
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        let title = "클래스로 컴포넌트 만들기";

        let seeSharp = {
            title: "C# 교과서",
            description: "내용 들어오는 곳..."
        };

        function BookTitle() {
            return (
                <div className="row">
                    <h1>My Book</h1>
                </div>
            );
        }

        const BookFooter = () => <p>제가 집필한 책 목록입니다.</p>;

        const Copyright = () => {
            return (<p>Copyright &copy;</p>);
        }

        function BookCardOther(props) {
            //console.log(props); 
            console.log(Object.keys(props)); 
            return (
                <div className="container mb-2">
                    <div className="row">
                        <div className="col-12">
                            {props.title}
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-2">
                            {props.title}
                        </div>
                        <div className="col-10">
                            {props.description}
                        </div>
                    </div>
                </div>
            );
        }

        // 구조 파괴 할당 
        function BookCard({ title, description, price }) {
            return (
                <div className="container mb-2">
                    <div className="row">
                        <div className="col-12">
                            {title}
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-2">
                            {title}
                        </div>
                        <div className="col-10">
                            {description} 
                            <hr />
                            { price + '원' }
                        </div>
                    </div>
                </div>
            );
        }

        function BookListOther(props) {
            if (props.sortOrder === "ASC") {
                return (
                    <>
                        <BookCard title="ASP.NET &amp; Core를 다루는 기술" description="ASP.NET &amp; Core를 다루는 기술 책입니다." price={ 55000 } /> 
                        <BookCard title={seeSharp.title} description={seeSharp.description} price={ 30000 } /> 
                    </>
                );
            }
            else {
                return (
                    <>
                        <BookCard title={seeSharp.title} description={seeSharp.description} price={ 30000 } /> 
                        <BookCard title="ASP.NET &amp; Core를 다루는 기술" description="ASP.NET &amp; Core를 다루는 기술 책입니다." price={ 55000 } /> 
                    </>
                );
            }
        }

        function BookList(props) {
            return (
                <>
                    {
                        (props.sortOrder === "ASC") 
                    ? 
                        <>
                        <BookCard title="ASP.NET &amp; Core를 다루는 기술" description="ASP.NET &amp; Core를 다루는 기술 책입니다." price={ 55000 } /> 
                        <BookCard title={seeSharp.title} description={seeSharp.description} price={ 30000 } /> 
                        </>
                    : 
                        <>
                        <BookCard title={seeSharp.title} description={seeSharp.description} price={ 30000 } /> 
                        <BookCard title="ASP.NET &amp; Core를 다루는 기술" description="ASP.NET &amp; Core를 다루는 기술 책입니다." price={ 55000 } /> 
                        </>
                    }
                </>
            );
        }

        // 함수형 컴포넌트
        function BookAppOther() {
            return (
                <>
                    <BookTitle />
                    <BookList sortOrder="DESC" /> 
                    <BookFooter />
                    <Copyright /> 
                </>
            );
        }

        // 클래스형 컴포넌트
        class BookApp extends React.Component {
            render() {
                return (
                    <>
                        <BookTitle />
                        <BookList sortOrder="ASC" /> 
                        <BookFooter />
                        <Copyright /> 
                    </>
                );
            }
        }

        // 최종 렌더링
        ReactDOM.render(
            <BookApp />,              
            document.getElementById("root")
        );
    </script>
</body>
</html>

상태 관리와 클릭 이벤트

코드: HelloReact12.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello React 12 - 상태 관리와 클릭 이벤트</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script crossorigin="anonymous" src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <!-- <script src="./babel.min.js"></script> -->
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        let title = "클래스로 컴포넌트 만들기";

        let seeSharp = {
            title: "C# 교과서",
            description: "내용 들어오는 곳..."
        };

        function BookTitle() {
            return (
                <div className="row">
                    <h1>My Book</h1>
                </div>
            );
        }

        const BookFooter = () => <p>제가 집필한 책 목록입니다.</p>;

        const Copyright = () => {
            return (<p>Copyright &copy;</p>);
        }

        // 구조 파괴 할당 
        function BookCard({ title, description, price }) {
            return (
                <div className="container mb-2">
                    <div className="row">
                        <div className="col-12">
                            {title}
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-2">
                            {title}
                        </div>
                        <div className="col-10">
                            {description} 
                            <hr />
                            { price + '원' }
                        </div>
                    </div>
                </div>
            );
        }

        class BookList extends React.Component {
            state = {
                theme: 'blue'
            }
            blueTheme = () => this.setState({theme: 'blue'});
            whiteTheme = () => this.setState({theme: 'white'});
            render() {
                return (
                    <>
                        <div>{this.state.theme === "white" ? "white theme" : "blue theme" }</div>
                        <div>
                                <button onClick={ () => { this.setState({theme: 'white'}); } }>White 1</button>
                                <button onClick={ this.whiteTheme }>White 2</button>
                                <button onClick={ () => { this.setState({theme: 'blue'}); } }>Blue 1</button>
                                <button onClick={ this.blueTheme }>Blue 2</button>
                        </div>
                        <BookCard title={seeSharp.title} description={seeSharp.description} price={ 30000 } /> 
                        <BookCard title="ASP.NET &amp; Core를 다루는 기술" description="ASP.NET &amp; Core를 다루는 기술 책입니다." price={ 55000 } /> 
                    </>
                );
            }
        }

        // 클래스형 컴포넌트
        class BookApp extends React.Component {
            render() {
                return (
                    <>
                        <BookTitle />
                        <BookList sortOrder="ASC" /> 
                        <BookFooter />
                        <Copyright /> 
                    </>
                );
            }
        }

        // 최종 렌더링
        ReactDOM.render(
            <BookApp />,              
            document.getElementById("root")
        );
    </script>
</body>
</html>

컬렉션 형태의 데이터 출력

코드: HelloReact13.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello React 13 - 컬렉션 형태의 데이터 출력</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script crossorigin="anonymous" src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <!-- <script src="./babel.min.js"></script> -->
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        let title = "클래스로 컴포넌트 만들기";

        let seeSharp = {
            title: "C# 교과서",
            description: "내용 들어오는 곳..."
        };

        function BookTitle() {
            return (
                <div className="row">
                    <h1>My Book</h1>
                </div>
            );
        }

        const BookFooter = () => <p>제가 집필한 책 목록입니다.</p>;

        const Copyright = () => {
            return (<p>Copyright &copy;</p>);
        }

        // 구조 파괴 할당 
        function BookCard({ title, description, price, content, imageUrl }) {
            return (
                <div className="container mb-2">
                    <div className="row" style={{'cursor': 'pointer'}}>
                        <div className="col-2 p-1 card">
                            <span className="d-none">{title}</span>
                            <span className="">
                                <img src={imageUrl} alt={title} className="img-fluid" />
                            </span>
                        </div>
                        <div className="col-10 p-1 card">
                            <h2 className="card-header">
                                <a href="https://www.gilbut.co.kr/book/view?bookcode=BN002765" target="_blank"><strong>{title}</strong></a>
                            </h2>
                            <p>
                                <strong>{description}</strong>
                                <br />
                                {content}
                            </p>
                            <div className="p-1" style={{"margin-top": "auto"}}>
                                <a href="/BookList"><span className="badge badge-primary">학습 가이드</span></a>
                                <a href="/Books/Errata.aspx"><span className="badge badge-secondary">오탈자 정보</span></a>
                                <a href="/BoardIndex?BoardName=Qna"><span className="badge badge-danger">Q&amp;A</span></a>
                                <a href="https://www.gilbut.co.kr/book/view?bookcode=BN002765" target="_blank"><span className="badge badge-info">길벗 도서 소개</span></a>
                                <a href="https://www.youtube.com/playlist?list=PLO56HZSjrPTB4NxAsEP8HRk6YKBDLbp7m" target="_blank"><span className="badge badge-success">동영상 강의</span></a>
                                <a href="https://github.com/gilbutITbook/006890" target="_blank"><span className="badge badge-dark">전체 소스 코드(GitHub)</span></a>
                                <a href="https://bit.ly/Csharp-textbook" target="_blank"><span className="badge badge-warning">도서 보기</span></a>
                                <a href="https://bit.ly/2TvAyFj" target="_blank"><span className="badge badge-danger">구매</span></a>
                            </div>
                        </div>
                    </div>
                </div>
            );
        }

        class BookList extends React.Component {
            state = {
                theme: 'blue'
            }
            blueTheme = () => this.setState({theme: 'blue'});
            whiteTheme = () => this.setState({theme: 'white'});
            render() {
                return (
                    <>
                        <div>{this.state.theme === "white" ? "white theme" : "blue theme" }</div>
                        <div>
                                <button onClick={ () => { this.setState({theme: 'white'}); } }>White 1</button>
                                <button onClick={ this.whiteTheme }>White 2</button>
                                <button onClick={ () => { this.setState({theme: 'blue'}); } }>Blue 1</button>
                                <button onClick={ this.blueTheme }>Blue 2</button>
                        </div>

                        {
                            this.props.books.map(book => {
                                return <BookCard key={book.id} title={book.title} description={book.description} price={ book.price } content={book.content} imageUrl={book.imageUrl} /> 
                            })
                        }
                        
                    </>
                );
            }
        }

        const books = [
            { id: 1, title: "C# 교과서", description: "기초에서 활용까지! 기본기를 탄탄하게 다지는 C# 입문서", content: "C#의 쓰임새와 기초 문법부터 컬렉션, 제네릭, LINQ, 개체 지향, 동적 형식, 비동기 프로그래밍과 같은 활용과 확장 기능까지 입문자에게 필요한 모든 것을 설명합니다.", price: 30000, imageUrl: "https://www.dotnetkorea.com/Books/images/SeeSharpBook.png" },
            { id: 2, title: "ASP.NET & Core를 다루는 기술", description: "ASP.NET(.NET Framework)과 ASP.NET Core(.NET Core)를 한 권으로 학습합니다.", content: "Microsoft 웹 개발 기술의 집합체인 ASP.NET과 ASP.NET Core를 이용하여 웹 응용프로그램을 제작하는 쉽고, 빠르고, 강력한 기술인 ASP.NET의 전체를 다룹니다.", price: 55000, imageUrl: "https://www.dotnetkorea.com/Books/images/AspNetCore.jpg" },
        ];

        // 클래스형 컴포넌트
        class BookApp extends React.Component {
            render() {
                return (
                    <>
                        <BookTitle />
                        <BookList sortOrder="ASC" books={ books } /> 
                        <BookFooter />
                        <Copyright /> 
                    </>
                );
            }
        }

        // 최종 렌더링
        ReactDOM.render(
            <BookApp />,              
            document.getElementById("root")
        );
    </script>
</body>
</html>
VisualAcademy Docs의 모든 콘텐츠, 이미지, 동영상의 저작권은 박용준에게 있습니다. 저작권법에 의해 보호를 받는 저작물이므로 무단 전재와 복제를 금합니다. 사이트의 콘텐츠를 복제하여 블로그, 웹사이트 등에 게시할 수 없습니다. 단, 링크와 SNS 공유, Youtube 동영상 공유는 허용합니다. www.VisualAcademy.com
박용준 강사의 모든 동영상 강의는 데브렉에서 독점으로 제공됩니다. www.devlec.com