2.1 Before React
2022. 9. 1. 15:38ㆍReact/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 |