React 시작하기 - Vanilla JS 의 한계에 따른 React JS 필요성 인식

woodylovesboota·2023년 8월 15일

본격적으로 React를 공부하기에 앞서 간단한 예제를 Vanilla JS 와 React JS로 구현해 보고 이를 통해 React의 장점과 필요성에 대해 알아보자.

버튼을 클릭히면 counter가 증가하는 예제를 만들어 보자.

Vanilla JS

기본적인 JS를 이용하여 Web Page를 만드는데는 크게 3가지 과정을 거쳐야 한다.

HTML에서 element 생성하기
JS에서 HTML element 불러오기
Element에 event handler 추가하기

HTML에서 element 생성하기

클릭할 버튼과 counter를 나타낼 span element를 HTML에 생성하였다.

<body>
  <span>Total clicks: 0</span>
  <button id="btn">Click me</button>
</body>

JS에서 HTML element 불러오기

Javascript Document Object의 property인 getElementById(), querySelector() 등을 이용하여 HTML element를 JS로 불러올 수 있다.

const button = document.getElementById("btn");
const span = document.querySelector("span");

Element에 Event Handler 추가하기

브라우저에서 Event는 클릭, 타이핑 등 사용자의 상호작용으로 인해 일어나는 사건을 의미한다. 따라서 이러한 Event를 처리할 수 있는 event handler를 구현해야 한다.

보통의 경우 element.addEventListener() 를 이용해 event handler를 추가한다.

예제에서는 button element에 "click" event handler를 추가하였다.

let counter = 0;
button.addEventListener("click", () => {
  counter++;
  span.innerText = `Total clicks: ${counter}`;
});

Vanilla JS를 통해 간단한 counter 예제를 만들었다. 전체 코드와 실행 화면은 다음과 같다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <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>
  </body>
  <script>
    let counter = 0;
    const button = document.getElementById("btn");
    const span = document.querySelector("span");
    button.addEventListener("click", () => {
      counter++;
      span.innerText = `Total clicks: ${counter}`;
    });
  </script>
</html>

Vanilla JS의 한계

Vanilla JS를 통한 Web 구현방식의 문제점은 크게 가지가 있다.

코드의 가독성 저하
코드 유지보수의 어려움

코드의 가독성 저하

위의 예제와 같은 간단한 구현에서는 크게 문제되지는 않지만, 코드의 양이 많은 복잡한 결과물을 구현 할 때 JS source code는 매우 읽기 어렵다. 아래는 github 메인 page의 html 코드이다.

단순히 구현해야할 양이 많은것을 넘어서 HTML 과 Vanilla JS 만 이용하여 구현할 경우 반복되는 코드가 많아지고 전체적인 element 구조를 파악하기 힘들어진다.

코드 유지보수의 어려움

예제의 button이 1000개가 있다고 생각해보자. 1000개의 button을 일일이 생성하는것도 일이지만 후에 button에 새로운 property를 추가해주어야 하는 경우 개발자는 같은 작업을 1000번 반복하여야 한다.

또한 개발 및 유지보수 과정에서 HTML과 JS를 번갈아가며 작업해야 한다는 불편함 또한 존재한다.

React JS

❗️React에서는 innerText 등의 element property를 변경하기 위해서 State를 이용해야 한다고 한다. 따라서 기존의 예제와 다르게 console.log를 이용한 event를 발생시켰다.

위에서 얘기했던 Vanilla JS의 한계를 React는 대부분 해결한다.

같은 예제를 React JS를 통해 구현해보자.

먼저 script에서 React를 사용할 수 있게 React 및 ReactDOM을 받아와야 한다.

<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>

이어 element를 생성한다. 이 때, React는 HTML 영역이 아닌 JS 영역에 element를 생성한다. React는 HTML 영역을 거의 건드리지 않는다.

const span = React.createElement("span", null, "Total clicks: 0");
const btn = React.createElement("button", { id: "btn", onClick: () => console.log("clicked!") }, "Click me");

코드를 살펴보면 Vanilla JS 때와는 다른점이 하나 더 있다. button element를 생성하는 코드에서 onClick event에 대한 부분 역시 구현되어 있다. React는 event handler를 element 생성과 동시에 추가할 수 있다.

이제 마지막으로 element를 HTML에 배치하면 된다.

<body>
  <div id="root"></div>
</body>

const root = document.getElementById("root");
const container = React.createElement("div", null, [span, btn]);
ReactDOM.render(container, root);

전체 코드는 다음과 같다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React Example</title>
  </head>
  <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 span = React.createElement("span", null, "Total clicks: 0");
    const btn = React.createElement("button", { id: "btn", onClick: () => console.log("clicked!") }, "Click me");
    const container = React.createElement("div", null, [span, btn]);
    ReactDOM.render(container, root);
  </script>
</html>

위의 Vanilla JS 코드와 비교해 보자.

JS와 HTML을 번갈아 이동하지 않아도 되고 element 생성과 동시에 event handler 등 속성을 설정해 줄 수 있다는 점에서 React의 장점이 나타나지만, 코드의 가독성이나 유지보수성이 크게 올라갔다고는 느껴지지 않는다.

React에서는 JSX를 이용하여 이를 해결하고 있다.

JSX

JSX란 Javascript를 확장한 문법으로 JS에서 HTML을 작성하드시 코드를 작성할 수 있다. 따라서 코드의 가독성이 높고 작성하기 편리하다.

React에서 JSX는 브라우저에서 실행하기 전에 babel을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

예제의 코드를 JSX 문법을 사용하여 구현해보자.

가장 먼저 babel을 받아와야 한다. babel은 JSX 문법으로 작성된 코드를 JS 코드로 변환하는 역할을 한다.

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

이후 span 과 button을 생성한다. 앞에서 설명했드시 JSX에서는 HTML을 작성하드시 코드를 작성할 수 있다. 또한 이 역시 element 생성과 동시에 event handler를 추가할 수 있다.

const Title = () => <span>Total clicks: 0</span>
const Button = () => <button onClick={() => console.log("im clicked")}>Click me</button>;

마지막으로 element를 HTML에 배치한다.

const Container = (
  <div>
  <Title />
  <Button />
  </div>
);

ReactDOM.render(Container, root);

전체 코드는 다음과 같다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React Example</title>
  </head>
  <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 src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    const root = document.getElementById("root");
    const Title = () => {
      return (
        <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
          Hello I'm a title
        </h3>
      );
    };
    const Button = () => <button onClick={() => console.log("im clicked")}>Click me</button>;
    const Container = (
      <div>
        <Title />
        <Button />
      </div>
    );
    ReactDOM.render(Container, root);
  </script>
</html>

코드에서 알 수 있드시 JSX 문법은 element 사이의 구조를 파악하기 매우 용이하다. Div 안에 Title 과 Button이 하나씩 존재하는 것을 한눈에 알 수 있다.

또한 코드의 유지보수가 쉽다. 수많은 버튼에 대한 event handler를 변경해야 하는 경우에도 Button element를 생성하는 코드 부분만 수정해준다면 모든 버튼의 event handler를 변경 할 수 있다.

마치며

위에서 구현한 방식은 React를 이용할 때 많이 사용하지 않는 방법이다. 실제로는 create-react-app을 이용하여 더 편하게 React를 사용한다. 비록 불편한 방법이었지만, React의 기초적인 동작 원리에 대해 이해하고 Vanilla JS가 가지고 있는 한계를 React가 어떠한 방식으로 벗어났는지 알게된 시간이였다.

추가적으로 예제에서 해결하지 못한 State로 Property를 변경하는 부분을 추가적으로 알아봐야 할 것 같다. 아마 다음 기록의 주제가 되지 않을까 싶다.

woodylovesboota

다음 포스트