안녕하세요.
이 곳은 제가 프론트엔드 분야를 난생 처음 접하고, 혼자 주절주절하는 공간입니다.
오늘 알아볼 내용은 React 2편입니다.
Vanilla JS와 React의 비교
Vanilla JS
바닐라JS 코드와 리액트를 비교해보고 어떤 장점이 있는지 살펴볼게요.
먼저 HTML과 바닐라 JS로 아주 간단한 카운터를 만들었습니다.
<!DOCTYPE html>
<html lang="ko">
<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>
<span>Total Clicks: 0</span>
<button id="btn">Click Me</button>
<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>
</body>
</html>
바닐라 JS 코드를 보면,
- 각각 button태그와 span태그를 JS로 불러온다.
- addEventListener로 이벤트를 지정해준다.
- 이벤트에 사용될 함수의 내용을 넣어준다.
단순한 경우엔 저렇게 작성해도 문제가 없겠죠.
그런데 button태그 1,000개에 span태그 10,000개라면?
......
하나하나 class 혹은 id로 지정해주고 계속해서 handleClick같은 함수를 만들어줘야 하겠죠? 시간이 얼마나 걸릴지 모르겠네요.
React
그럼 리액트는 뭐가 다를까요?
리액트의 구동원리를 이해하기 위한 하드코딩을 해보겠습니다.
말 그대로 구동원리를 이해하기 위함이에요.
실제로 이렇게 코딩하는 사람은 없을겁니다.
첫번째로 span 태그를 구현해보겠습니다.
<!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">
<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>
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script>
const root = document.getElementById("root")
const span = React.createElement("span", { id: "sspan" })
ReactDOM.render(span, root)
</script>
</body>
</html>아까 HTML에 직접 여러가지 태그를 작성했던것과는 다른 모습이에요.
-
span 태그를 만들어줍니다. 주의할 점은, 괄호안에 들어가는 내용은 HTML 태그명과 동일해야해요. span 태그를 만들어주기 때문에 "span"이 들어갔습니다.
-
여기서 처음보는 녀석이 등장하네요.
ReactDOM.render(컴포넌트, 컨테이너) 메소드는 컴포넌트를 출력해줍니다.
앞에는 대상(컴포넌트)을, 뒤에는 위치(컨테이너)를 지정해줘요.
위 예시에서는 컨테이너에 root가 들어가있는데요. -
HTML body 내부에 id값이 root인 div를 하나 만들어두고, 그곳에 우리가 코딩하는 모든 내용이 들어가는 방식이 리액트의 가장 일반적인 형태라고 합니다.
-
그래서 id값이 root인 div태그를 만들어주고, 그 div를 가져왔습니다.
-
만약 span 태그에 id나 class가 필요하다면, 두번째 인수에 직접 지정해줄 수도 있습니다.
그런데 우리의 span에는 아직 아무런 내용이 없어요.
바닐라 JS에서는 Total Clicks: 0 이 내용이 있었죠.
- 그럼 바로 span 태그에 들어갈 텍스트를 세번째 인수로 넣어줍니다.
그럼 최종적인 형태는 이렇게 되겠네요.
const span = React.createElement(
// 유효한 HTML 태그는 뭐든 다 만들 수 있습니다.
"span",
// id, class, style등등 원하는 값을 지정합니다.
{ id: "sspan", style: { color: "red" }},
// 해당 컴포넌트의 컨텐츠를 작성해줍니다.
"Total Clicks: 0"
) 
style 내용도 적용된 모습입니다.
지금까지 해 온 내용을 토대로 비교해보자면, 바닐라 JS와 리액트는 서로 작업 순서가 반대입니다.
바닐라 JS는 HTML 코드를 먼저 작성하고, 그걸 토대로 JS 코드를 작성합니다.
하지만 리액트는 그 반대로 작업을 하죠.
HTML을 만들고, JS로 찾아오고 업데이트하는 바닐라 JS의 방식이 아닌,
리액트에서 편리하게 HTML과 JS를 업데이트 할 수 있습니다.
업데이트가 필요한 HTML만 쏙쏙 수정해주면 되는거죠.
즉 시작은 자바스크립트로 엘리먼트들을 전부 작성하면서 시작하지만,
마지막엔 우리가 작성한 코드를 리액트가 HTML로 번역해 그려줍니다.
