th42500의 TIL

[JavaScript & React.js] 버튼을 클릭한 횟수 출력하기 본문

Frontend/React.js

[JavaScript & React.js] 버튼을 클릭한 횟수 출력하기

th42500 2022. 4. 19. 16:23

해당 내용은 노마드코더의 ReactJS로 영화 웹 서비스 만들기라는 강의를 듣고 작성한 내용임을 미리 알려드립니다.

자세한 내용은 노마드코더 홈페이지의 강의를 참고해주세요.

https://nomadcoders.co/react-for-beginners/lobby

 

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders

왕초보를 위한 React

nomadcoders.co

 

버튼을 클릭한 횟수 출력하기

1️⃣ Javascript

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<!-- 1단계. HTML 만들기 -->
	<span> Total clicks : 0</span>
	<button id="btn">Click Me</button>
</body>
<script>
	let counter = 0;
	// 2단계. Javascript에서 가져오기
	const button = document.getElementById("btn");
	const span = document.querySelector("span"); 	// 페이지에 counter의 증가를 반영시키기 위해 html의 span을 가져옴
	function handleClick() {
		console.log("I have Clicked");
		// 4단계. 데이터를 업데이트
		counter = counter + 1;
		// 5단계. HTML을 업데이트 (가장 중요!)
		span.innerText = `Total clicks : ${counter}`;
	}
	// 3단계. event를 등록
	button.addEventListener("click", handleClick);
</script>
</html>

Javascript를 이용한 코드 구현 방법은...

1️⃣ HTML 생성

2️⃣ Javascript에서 각 element 가져오기

3️⃣ event 등록

4️⃣ 데이터 업데이트

5️⃣ event 등록

 

기존 자바스크립트 코드의 문제점

위와 같이 코딩을 하게 된다면, 반복적으로 handleClick와 같은 새로운 함수를 생성해야 한다.

👉 비슷한 이름과 비슷한 기능의 Javascript 함수가 많아지게 된다면 개발할때 코드가 헷갈릴 수 있다.

 

위의 코드를 React.js로 바꾸어보자.

먼저, React.js 코드를 보기에 앞서 해당 코드는 개발자들이 쓰는 형식이 아님을 먼저 알고 보자.

강의에서도 React.js 코드를 알려주며 이번 강의에서 나오는 코드들을 사용하는 법을 절대 외우지 말라고 강조한다.

해당 코드는 매우 어려운 방식으로 사용한 것이며, 우리는 앞으로 더 쉬운 방식의 React.js 프로그래밍을 할 것이기 때문

 

우리가 이번 강의를 통해 알아야 할 핵심은 React.js는 각 element들을 Control할 수 있다는 점이다.

2️⃣ React.js

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="root"></div>
</body>
	<!-- React.js 설치(import)를 위한 Javascript 코드 url -->
	<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>
	<script>
		const root = document.getElementById("root");
		// 1단계. Javescript를 이용하여 element를 생성 
		const h3 = React.createElement(
        	"h3", {
				id: "title",
				onMouseEnter: () => console.log('mouse enter'),
			}, 
            "Hello, I'm a span!"); 
		const btn = React.createElement(
        	"button", {
				onClick: () => console.log("I'm clicked"),
			}, "Click Me!!");
		// 2단계. React.js를 이용하여 html로 번역하기
		// react-dom을 사용하여 html <body>안에 element 넣기
		const container = React.createElement("div", null, [h3, btn]);
		ReactDOM.render(container, root);
	</script>
</html>

React.js를 사용하기 위한 준비

해당 강의에서 React.js를 사용하기 위해서는 react와 react-dom을 설치하여야 한다.

<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>
더보기

⭐ CDN링크에 담긴 버전

 

버전 번호는 x.y.z 형태로,

👉 z변경 : 치명적인 버그 수정

👉 y변경 : 새로운 기능 출시 or 치명적이지 않은 버그 수정

👉 x 변경 : 호환성이 유지되지 않는 변경

위와 같이 이슈와 그의 수정에 따라 버전 번호를 바꾸어 배포한다고 한다.

 

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

위와 같이 React.js를 import했기 때문에 createElement()를 이용하여 React.js object에 접근이 가능하다.

 

React.js는 Javascript와는 달리...

1️⃣ Javascript를 이용하여 element 생성

     👉 React.createElement(tagName, Property(class name, id, eventListener, ...), content)

     👉 React.js에서 eventListener을 등록할 때에는 앞에 on을 붙여주어야 event로 인식

2️⃣ React.js를 이용하여 html로 번역

     👉 render() : React element를 가지고 HTML로 만들어 배치함으로써 사용자에게 보여준다는 의미의 함수

 

다음 강의에서는 조금 더 쉬운 방법의 React.js 코드를 구현하는 시간을 가져볼 예정이라고 한다.

'Frontend > React.js' 카테고리의 다른 글

[React.js] Unit Converter (단위 변환) 앱 만들기  (0) 2022.04.29
[React.js] State를 Setting 하는 2가지 방법  (0) 2022.04.28
[React.js] React.useState()를 이용하여 자동으로 리렌더링 하기  (0) 2022.04.27
[React.js] JSX를 활용한 React.js 프로그래밍  (0) 2022.04.20
[React.js] vanillaJS VS React.js  (0) 2022.04.20
'Frontend/React.js' Related Articles more
Comments