728x90
1. 클릭하면 함수가 동작하는 코드를 간단하게 만들어본다.
<!DOCTYPE html>
<html>
<body>
<button id="btn"> Click me</button>
</body>
<script>
const button = document.getElementById("btn");
function handleClick(){
console.log("i have been clicked")
}
button.addEventListener("click", handleClick);
</script>
</html>
2. 클릭하면 카운트가 올라가도록 해본다.
<body>
<span>Total clicks : 0</span>
<button id="btn"> Click me</button>
</body>
<script>
let cnt = 0;
const button = document.getElementById("btn");
function handleClick(){
cnt += 1;
}
button.addEventListener("click", handleClick);
</script>
→ 콘솔에 찍어보면 클릭한 수가 나온다.
3. 페이지가 클릭하면 새로고침되도록 해준다.
<script>
let cnt = 0;
const button = document.getElementById("btn");
const span = document.querySelector("span");
function handleClick(){
cnt += 1;
span.innerText = cnt;
}
button.addEventListener("click", handleClick);
</script>
4. 남겨놓을 텍스트와 변경될 텍스트를 분리한다.
<script>
let cnt = 0;
const button = document.getElementById("btn");
const span = document.querySelector("span");
function handleClick(){
cnt += 1;
span.innerText = `Total clicks : ${cnt}`;
}
button.addEventListener("click", handleClick);
</script>여기서 innerText에는 작은따옴표가 아니라 ` 이다.
5. 리액트로 코드를 단순하게 만들기
728x90
'React > 영화웹서비스만들기' 카테고리의 다른 글
| React.js가 useState로 원하는 Rerendering을 도와주는 방법 (0) | 2024.04.08 |
|---|---|
| React.js의 state 사용하기 (0) | 2024.04.08 |
| 리액트를 활용하여 코드를 간단하게 만들기 (0) | 2024.04.03 |
| 리액트를 활용하여 코드를 작성하기 (0) | 2024.04.02 |
| VSCode html 파일 만들기 (0) | 2024.04.02 |