React란?
간단한 카운터 증가 예시를 통해 기존에 사용방법을 알아보자
원래 Javascript에서 HTML을 불러올때는
<!DOCTYPE html>
<html>
<body>
<span>Total clicks : 0</span> // 토탈클릭 생성
<button id="btn">Click me</button> // 버튼 생성
</body>
<script>
let counter = 0; // 변수 카운터 0 주고
const button = document.getElementById("btn"); // id btn을 불러와 변수 button에 넣고
const span = document.querySelector("span");
// span을 불러와 변수 span에 넣고
function handleClick() { // 함수생성
counter = counter + 1; // 카운터 + 1
span.innerText = `Total clicks : ${counter}`; // innerText 속성을 이용
}
button.addEventListener("click", handleClick); // 버튼을 클릭할때 함수가 실행되게끔 이벤트를 만들어줌
</script>
</html>이런식으로 HTML을 생성하고, Javascript에서 불러와서 넣고, 실행하고
복잡한 방식으로 이루어져있다
물론 이 방법이 틀린 방법은 아니며, 예제로 보기에는 전혀 문제가 없지만
span과 button 두개를 생성하기위해 많은 양의 코드가 들어가며
프로젝트 단위로 넘어갈 경우 규칙도 많아지며, 처리해야할 이벤트도 많아지기에 가독성도 매우 떨어지며 나쁜 상황이 펼쳐진다
그래서 React가 만들어졌으며, HTML을 일일이 생성할 필요가 없으며 모든 코드는 Javascript로 이루어져있다
DOM을 전부 날리고 새로 만들어서 보여주자는 발상으로 시작된 React는 Javascript 라이브러리 이며, DOM을 직접 건드리는 행위는 절대 안한다
하지만 이렇게되면 성능 문제점이 발견되는데,
속도와 성능 문제는 Virtual DOM으로 해결
Virtual DOM은 메모리에 가상으로 존재하는 DOM으로 (자바스크립트 객체) 변경 속도가 빠르며, Virtual DOM과 브라우저 DOM을 비교하여 차이가 있는 곳을 감지해 => 브라우저 DOM에 패치해준다
그래서 사용법은?
카운터예시를
이젠 React로 사용 방법을 알아보자
<!DOCTYPE html>
<html>
<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>
const root = document.getElementById("root");
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("im clicked");
},
style: { backgroundColor: "red" },
},
"Click me"
);
const container = React.createElement("div", null, [h3, btn]);
ReactDOM.render(container, root);
</script>
</html>즉 위와같은 예제로 편하게 HTML요소를 생성가능하며, react안에서 모든걸 다룰 수 있다.
body안에서는 div id=root라는 태그만 하나 존재하며
그안의 h3, btn은 전부 스크립트로 작동한다
이 방법은 가장 기초적인 방법이며 조금은 까다로운 방법이기도 하다
단순한 예시를 통해 사용법을 알아볼 뿐이지 실제로 이렇게 사용하진않는다 개념만 알고 넘어가기에 충분하다
