바닐라 JS와 React JS로 버튼 클릭 횟수를 알려주는 앱 만들기 (harder way)
바닐라 JS로 만들기 (vanilla.html 참고)
1. HTML을 작성한다.
2. JS에서 가져온다.
3. event를 감지한다.
4. 데이터를 업데이트한다. (HTML 또한 업데이트함.)
<!--버튼을 몇 번 클릭했는지 세는 어플이다.-->
<!DOCTYPE html>
<html>
<body>
<span>Total clicks: 0</span>
<button id="btn">Click me</button>
</body>
<script>
let counter = 0;
const button = document.getElementById("btn");
const span = document.querySelector("span");
function handleClick() {
counter += 1;
span.innerText = `Total clicks: ${counter}`;
}
button.addEventListener("click", handleClick);
</script>
</html>위와 같은 방식으로 작성하면 코드가 길어질 경우 혼란스러워질 것이고, 시간도 오래 걸릴 것이다.
React JS로 만들기 (index.html 참고)
우선, <srcipt> 의 src 속성을 이용해 리액트를 실행시키는 코드를 작성한다.
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
다음 시간에 이어서 ...!
ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders
ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders
React for Beginners
nomadcoders.co
'React study > React JS로 영화 웹 서비스 만들기' 카테고리의 다른 글
| [React] 1-5. JSX로 카운터 앱 만들기 (2) (0) | 2023.05.23 |
|---|---|
| [React] 1-4. JSX를 이용해 카운터 앱 만들기 (1) (0) | 2023.05.23 |
| [React] 1-3. React.js로 카운터 앱 만들기 (2) (0) | 2023.05.23 |
| [React] 1-2. React.js로 카운터 앱 만들기 (1) (0) | 2023.05.23 |
| [React] 1-0. ReactJS가 필요한 이유 (0) | 2023.05.23 |
댓글