2.1 Before React

2022. 9. 1. 15:38React/ReactJS로 영화 웹 서비스 만들기

먼저 Vanilla Javascript를 통해

버튼을 클릭하면 counting되는 만큼 화면에 출력하는 페이지를 만들어보자.

 

vanilla.html

<!-- 버튼을 몇 번 클릭했는지 세는 어플을 만들어보자 -->
<!DOCTYPE html>
<html lang="en">

<body>
    <span>Total clicks: 0</span>
    <button id="btn">Click me</button>
</body>
<script>
    let counter = 0;
    // 근데 document.querySelector("button")는 button이 많은 어플리케이션에서 쓰면 제대로 작동하지 않음
    // const button = document.querySelector("button");
    // 그래서 대부분 아래와 같이 id를 사용함
    const button = document.getElementById("btn");
    const span = document.querySelector("span");

    // Click에 대응할 function
    function handleClick() {
        counter = counter + 1;
        span.innerText = `Total clicks: ${counter}`;
    }

    // Click 감지
    button.addEventListener("click", handleClick);
</script>
</html>

그러면 다음과 같이 출력이 된다.

이를 만드는데도 많은 소스코드가 필요하다는 것을 알 수 있다.

 

 

다음은 React를 이용하여 페이지를 생성해 볼것인데

먼저 React 공식 페이지를 통해 cdn을 이용하여 React를 사용해보겠다.

https://ko.reactjs.org/docs/cdn-links.html

 

CDN 링크 – React

A JavaScript library for building user interfaces

ko.reactjs.org

나는 배포용을 사용하였다.

<!-- 개발용 -->
<!-- <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 crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

 

이 이상은 다음 강의해서 진행 해 보자.

'React > ReactJS로 영화 웹 서비스 만들기' 카테고리의 다른 글

3.0 Understanding State  (0) 2022.09.06
2.6 JSX part Two  (0) 2022.09.05
2.5 JSX  (0) 2022.09.05
2.3 Events in React  (0) 2022.09.02
2.2 Our First React Element  (0) 2022.09.02