Before React
리액트의 장점을 알아보기 위해 바닐라 js와 비교해보자.
JavaScript로 눌린 횟수 나타내기
<body>
<span>Total clicks: 0</span>
<button id="btn">Click me </button>
</body>
<script>
let counter=0;
const button = document.getElementById("btn");
const span=document.querySelector("span");
function handleClick() {
counter=counter+1;
span.innerText=`Total clicks: ${counter}`;
}
button.addEventListener("click", handleClick);
</script>html요소를 JavaScript에서 불러와서 동작한다.
위 코드를 React JS로 나타내기
우선 react를 쓰기 위해서 react와 react-dom을 import한다.
React JS의 규칙 중 하나는 HTML을 직접 작성하지 않는다는 것이다. 대신 JS코드를 사용한다.
React JS로 element 생성하기
개발자들이 작성하는 방법은 아니다. 그러나 어려운 방법을 먼저 이해해보자.
<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 span = React.createElement("span", {id:"sexy-span"}, "Hello I'm a span"); //따옴표 안에 들어가는 말은 HTML태그와 똑같은 이름이어야 한다. 속성값은 넣어도 되고 안넣어도 된다.
const root = document.getElementById("root");
//아직 div안에 span태그가 들어가지 않았다.
//react가 body안에 span태그를 생성하게 만들려면 react-dom을 사용해야 한다.
//react JS는 어플리케이션이 interactive 하도록 만들어주는 library이고 (엔진과 같다. interactive한 ui를 만들 수 있게 한다.)
//react-dom 은 라이브러리 또는 패키지인데, React element들을 HTML body에 둘 수 있도록 해준ㄷㅏ.(html에 react element를 두는 역할)
ReactDOM.render(span,root); //render : 사용자에게 보여준다.
//root태그 안에 span태그를 만든다.
//마지막 줄에서 React JS가 JavaScript로 생성한 element를 HTML로 번역한다.
</script>바닐라 JS에서는 HTML을 먼저 만들고, JavaScript로 가져와서 HTHL을 수정하는 방식이었고,
React JS에서는 JavaScript로 시작한다.
React JS는 업데이트가 필요한 요소를 업데이트 한다. React JS는 유저에게 보여질 내용을 컨트롤 할 수 있다는 말이다.
