혼자 HTML, CSS, Javascript를 공부해보면서 어느정도 기본적인 기능들을 공부해왔었습니다. 이 3가지 도구만 이용하여 웹 프로그래밍을 했었기 때문에, 딱히 불편함(?)을 느끼지 못했었습니다...(깊게 공부를 안해서 그랫나.. 쨋든)
그러다가 Javascript를 공부한지 얼마 안되었을 때, 유튜브나 주변 매체에서 react라는 것을 접하게 되서 나무위키나 이런 데서 조금 찾아봣었습니다 ㅋㅋㅋㅋ.
그 때는, 웹 개발자가 좀 더 쉽고 빠르게 프로그래밍할 수 있게 하는 Javascript 라이브러리? 정도로 이해했었습니다.
그래서 일단 웹의 3신기(HTML, CSS, Javascript) 다 공부해보고, React도 공부해봐야겠다는 생각을 했었는데, 이제 슬슬 시작할 때가 된 것 같네요..
#Why react?
우선, 리액트는 페이스북에서 만든 자바스크립트 라이브러리입니다.
이전까진 HTML의 element들을 수정하거나 업데이트하려면, Javascript로 getElementId나 querySelector로 그 element들을 가져와서 Javascript로 수정하고 다시 HTML에 반영했다면 : HTML ------------> Javascript ----------->HTML
React를 이용한다면, HTML로 부터 element들을 가져오는 과정을 생략하고 Javascript에서 직접 수정하여 HTML에 반영할 수 있는 것입니다. : Javascript ------------> HTML
//vanilla 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>
<button id = "click">Click!</button>
<span id = "count"></span>
<script>
const button = document.querySelector("#click");
const countNumber = document.querySelector("#count");
let n=0;
function count(){
n++;
countNumber.innerText = n;
}
button.addEventListener("click",count)
</script>
</body>
</html>//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>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<span id = "count"></span>
<span id = "show"></span>
<script>
let n = 0;
const count = document.getElementById("count");
const show = document.getElementById("show");
const button = React.createElement(
"button",
{
onClick : ()=>show.innerText = ++n
},
"Click!"
)
ReactDOM.render(button,count);
</script>
</body>
</html>따라서, React는 어떠한 작업에 대한 지름길 역할을 해줍니다. 단순 기능을 구현할 때는 큰 차이가 없을지 몰라도 복잡한 기능을 구현할 때는 상당한 메리트로 작용합니다. React로 하면 Interactive한 UI를 만들 수 있겠죠...
**스스로 공부하면서 이해한 내용입니다. 피드백 주시면 감사하겠습니다**