React를 이용한 counter 구현, Javascript를 이용한 counter구현을 비교해보면서
구조적으로 어떤 차이점을 가지고 있는지, 왜 React를 이용하여 구현하는 것이 더 좋은지에 대해 얘기해보려고합니다 !
먼저 React 프로젝트를 시작하기 앞서 해당 프로젝트가 저장될 폴더를 만들어주세요
저는 리액트 공부를 위한 프로젝트폴더니까 React_study라는 폴더를 만들었습니다 ~
CMD를 실행해 다음과 같이 명령어를 입력해주세요.
** cd 폴더위치 ** 해주시는거 잊지 마시구요
$ npm install -g create-react-app
$ create-react-app my-app
저는 다음과 같이 작성했습니다
이렇게 이동해주고
npx create-react-app study
그럼 cmd창 밑에서 삐로리하면서 프로젝트를 만들어줄거에요
Happy hacking! 이라는 문구가 뜨면 준비 완료!
이제 처음 만들었던 React_study 폴더를 가보면
짜잔 이렇게 준비되었습니다
폴더 안에 뭐가 많을텐데 당황하지않고 vscode로 해당 폴더를 열어줍니다
index.js 와 app,js를 제외한 나머지 js파일과 css파일을 지워주세요
이렇게 정리했으면 진짜 준비 끝
그럼 먼저 자바스크립트를 이용한 카운터를 먼저 구현해볼게요
* 화면에 " 00 " 이라는 숫자가 있으며
숫자 아래 count 라는 버튼을 클릭하면 숫자가 1씩 올라가게 만들어볼게요 *
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>카운터</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="counter">
<span id="count">00</span>
<button id="countButton">count</button>
</div>
<script src="app.js"></script>
</body>
</html>
css
.counter {
text-align: center;
margin-top: 50px;
}
#count {
font-size: 48px;
}
#countButton {
font-size: 24px;
margin-top: 20px;
cursor: pointer;
}
js
document.addEventListener("DOMContentLoaded", function () {
var count = 0;
var countDisplay = document.getElementById("count");
var countButton = document.getElementById("countButton");
countButton.addEventListener("click", function () {
console.log("자바스크립트 카운터 버튼 클릭!");
count++;
countDisplay.textContent = count < 10 ? "0" + count : count;
});
});
클릭한 만큼 표시된 숫자가 올라가는걸 확인할 수 있어요 ~
css,html,js 파일을 따로 만들어 작업하여 가독성은 좋지만 리액트로 작성하면 더 깔끔하고 확장성이 용이하게 작성할 수 있어요
이제 React로 만들어볼게요
import "./App.css";
function App() {
let number = 0;
const btnClick = () => {
number++;
console.log("리액트 버튼 클릭", number);
};
return (
<div className="App">
<button onClick={btnClick}>리액트 카운터 버튼</button>
<h1>{number}</h1>
</div>
);
}
export default App;
ctrl + ` 백틱 으로 터미널을 띄운 뒤 npm start 를 입력해 실행
버튼을 클릭하면 콘솔에선 카운트가 올라가지만 화면에선 변하지않아요
useState 함수를 이용해서 상태가 변화하도록 다시 작성해볼게요
import React from "react";
import { useState } from "react";
function App() {
const [number, setNumber] = useState(0);
const btnClick = () => {
setNumber(number + 1);
console.log("리액트 버튼 클릭", number);
};
return (
<div className="App">
<button onClick={btnClick}>리액트 카운터 버튼</button>
<h1>{number}</h1>
</div>
);
}
export default App;
이제 차이점과 장단점을 비교해볼까요 ?
자바스크립트 카운터
장점:
- 간단한 기능을 구현할 때는 별도의 라이브러리나 프레임워크 없이 순수 자바스크립트로도 충분히 구현 가능하다.
- 작은 규모의 프로젝트나 단순한 기능에 적합하다.
- 초기 렌더링 속도가 상대적으로 빠르다.
단점:
- 상태 관리와 UI 갱신을 직접 다루어야 하므로 코드의 복잡도가 증가한다.
- 큰 규모의 프로젝트나 복잡한 상태 관리가 필요한 경우 유지보수와 확장이 어려울 수 있다.
- DOM 조작으로 인한 성능 저하 가능성이 있다.
리액트 카운터
장점:
- 가상 DOM을 통한 효율적인 UI 업데이트로 성능이 향상된다.
- 상태 관리와 UI 갱신을 간편하게 할 수 있는 React의 상태 관리 기능 및 생명 주기 메서드를 활용할 수 있다.
- 컴포넌트 기반 아키텍처로 코드의 재사용성과 유지보수성이 높아진다.
단점:
- 학습 곡선이 상대적으로 높다. React의 생태계와 개념을 익히는 데 시간이 필요하다.
- 초기 렌더링 속도가 자바스크립트 카운터보다 느릴 수 있다.
- 작은 규모의 프로젝트나 간단한 기능을 구현할 때에는 오버헤드가 발생할 수 있다.
차이점
- 기술 스택: 자바스크립트 카운터는 HTML, CSS, JavaScript를 사용하고, 리액트 카운터는 React를 사용한다.
- 코드 구성: 자바스크립트 카운터는 세 가지 파일로 구성되어 있지만, 리액트 카운터는 단일 파일로 구성되어 있다.
- 동작 방식: 자바스크립트 카운터는 순수 자바스크립트를 사용하여 DOM을 직접 조작하지만, 리액트 카운터는 가상 DOM을 사용하여 React가 변화를 감지하고 자동으로 화면을 업데이트한다.
- 상태 관리: 자바스크립트 카운터는 변수를 사용하여 상태를 관리하지만, 리액트 카운터는 useState 훅을 사용하여 상태를 관리한다.
이번 포스팅에서는 간단한 카운터 예제를 통해 자바스크립트와 리액트의 차이점과 장단점을 알아보았어요
배우면 배울수록 재밌는 리액트다 이거에요 ㅎㅎ
'국비교육 > React' 카테고리의 다른 글
| React - 감정일기장 만들기 #02 (0) | 2024.03.24 |
|---|---|
| React - 감정 일기장 만들기 #01 (1) | 2024.03.22 |
| React 예제풀이 #03 useRef (0) | 2024.03.14 |
| React 예제풀이 #02 useEffect를 사용한 특정 조건에 따른 결과값 출력하기 (2) | 2024.03.12 |
| #React 리액트(React)를 왜 사용해야 할까? (0) | 2024.03.11 |
