[React.js] vanillaJS VS React.js

Frontend/React.js

[React.js] vanillaJS VS React.js

th42500 2022. 4. 20. 06:38

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

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

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

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

왕초보를 위한 React

nomadcoders.co

State

데이터가 저장되는 곳

JSX를 이용한 버튼 클릭 횟수 출력

JSX를 이용하여 지난번에 만들었던 버튼 클릭 횟수 출력 코드를 다시 만들어보자.

<!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>
	<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 src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
	<script type="text/babel">
		const root = document.getElementById("root");

		let cnt = 0;

		function countUp() {
			cnt = cnt + 1;
			render();  // countUp() 함수가 실행될 때마다 렌더링 (UI 업데이트를 위해)
		}

		function render() {
			ReactDOM.render(<Container />, root);
		}

		const Container = () => (
			<div>
				<h3>
					Total Clicks : {cnt}
				</h3>
				<button onClick={countUp}>
					Click Me!!
				</button>
			</div>
		);
		render();  // 페이지가 처음 실행될 때 렌더링
	</script>
</html>

✔ 전에 vanillaJS로 제작했던 코드를 실행했을 때에는 버튼을 클릭했을 때 크롬의 모든 요소들이 업데이트 되고 있는 것을 바로바로 보여주었다.

✔ 그러나 React.js와 JSX를 이용한 코드를 실행했을 때에는 버튼을 클릭했을 때 UI에서 바뀐 부분만 업데이트 되고 있는 것을 확인할 수 있다.

이 점은 React에 있어서 매우 중요한 부분이니 vanillaJS와 React.js 모두를 실행해보고 직접 비교하길 추천한다.

그러나 위의 코드 방식은 효율적이지 못한 코드이다. 만약 우리가 공지사항 게시판을 등록할 때마다 알림을 띄워야 한다면 모든 컴포넌트를 다시 호출하고 렌더링 한다고 생각해보자.