일반 html로만 사이트를 만든다면 분명 존재하는 수많은 중복 html 코드들이 존재 할 것입니다.
예를 들자면 header, footer, aside 등등의 공통된 코드들을 수도 없이 늘려본 경험이 다들 있을 거라고 생각이 됩니다.
React는 그런 중복 코드들을 줄이고자 Component로 만들어 버립니다. [코드 재활용] Component 기반의 UI 라이브러리라고 불리기도 합니다.
간단한 예시로 다음 코드를 보면 될 것 같습니다.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function plus() {
const result = document.getElementById("result");
const current = parseInt(result.innerText, 10);
result.innerHTML = current + 1;
}
function minus() {
const result = document.getElementById("result");
const current = parseInt(result.innerText, 10);
result.innerHTML = current - 1;
}
</script>
</head>
<body>
<p>Simple Counter</p>
<h2 id="result">0</h2>
<div>
<button onclick="minus()">Minus</button>
<button onclick="plus()">Plus</button>
</div>
</body>
</html>Vanilla JavaScript를 쓰셧던 분들이라면 자주 보셧을것 같습니다.
일단 counter 이라는 프로그램을 간단하게 만들어 볼 것인데 간단한 프로그램임에도 난잡한 코드가 된 것을 볼 수 있습니다.
다만 코드가 조금 불편한 부분이 있어서.. 코드를 조금 더 정리한다면
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>Simple Counter</p>
<h2 id="result">0</h2>
<div>
<button onclick="calc('+')">Plus</button>
<button onclick="calc('-')">Minus</button>
</div>
<script>
function calc(operation) {
const result = document.getElementById("result");
const current = parseInt(result.innerText, 10);
if (operation === '+') { result.innerHTML = current + 1 };
if (operation === '-') { result.innerHTML = current - 1 };
}
</script>
</body>
</html>이런식으로 코드를 적을수도 있습니다.
코드가 정리 되었음에도 불편한 부분들이 있네요,,
저런 코드가 나중에 50개 100개가 넘어간다면 힘들것 같네요..
다음 포스트에서 state에 대해 알아봐영
https://coxemonkey.tistory.com/3
React - state
전에 봤던 vanilla js 의 counter 프로그램을 React로 만든다고 한다면, App.js import React from "react"; function App() { return ( ); } export default App; 기본적으로 Counter 이라는 Component 를 이용하..
coxemonkey.tistory.com
아직 정리가 덜 된 관계로 차후 본문이 업데이트 될 예정입니다
'FrontEnd > React' 카테고리의 다른 글
| React - useEffect (0) | 2022.03.27 |
|---|---|
| React - useRef DOM 제어 (0) | 2022.03.25 |
| React & Node.js 연동하기 (0) | 2022.03.24 |
| React - Props (0) | 2022.03.23 |
| React - State (0) | 2022.03.18 |