개발 일지

[react] 버튼 만들어서 클릭 이벤트를 받고, 이벤트 횟수 보여주기

jayoon 2024. 4. 25. 07:37

개요

자사 서비스 어드민 페이지 유지 보수 및 기능 개발을 맡게 되었다. 이에 따라 처음으로 프론트 리액트 공부를 하게 되었고, 내용을 정리하여 한다.

본문

<!DOCTYPE html>
<html>
	<span>Total clicks: 0</span>
	<body>
		<button id="btn">Click me</button>
	</body>
	<script>
		let count = 0
		const button = document.getElementById("btn")
		const span = document.querySelector("span")

		function handleClick() {
			count++
			span.innerText = `Total clicks: ${count}`
		}

		button.addEventListener("click", handleClick)
	</script>
</html>

span

특정 텍스트를 감싸는 인라인 컨테이너이다. javascript로 특정 span의 텍스트 내용을 변경할 수 있다.

템플릿 리터럴(``)

자바스크립트에서 문자열로 나타낼 수 있으며 변수를 문자열과 같이 넣을 수 있어 편리하다. java나 C 같은 언어에서는 문자열에서 '+' 같은 연산자를 사용해야 하는데 자바스크립트는 이것도 지원하지만 더 편리하게 이를 사용할 수 있다. ${variable name}을 내부에 적으면 된다. 여기에선 count 변수의 값을 넣어주고 있다.

document

로드된 HTML 문서는 document라는 객체가 된다. 이 객체를 통해 HTML 요소에 접근할 수 있다. 해당 객체로 다음과 같은 일을 할 수 있다.

  • 요소 생성, 탐색, 변경 
  • 이벤트 처리
  • 문서 정보 액세스 document.title, document.URL, document.head, document.body

결론

노마드 코더의 프론트 엔드 강의를 보며 학습하였다. 앞으로 자사 서비스 admin 페이지를 유지-보수 및 개발을 할 예정이니 계속 퇴근 후 프론트 공부를 조금씩 할 예정이다.