두 가지 개발 방식을 비교함으로써 왜 React를 만들었는지 알아봅시다.

먼저 우리는 앞장에서 언급했던 웹 프레임워크/라이브러리의 도움 없이 쉽게 웹 사이트를 만들어낼 수 있습니다. 단지 HTML, CSS, Javascript를 사용하면 동적인 웹 사이트를 쉽게 만들 수 있죠. 실제로 다른 웹 프레임워크나 라이브러리 없이 오직 HTML, CSS, Javascript로만 만든 웹 사이트도 쉽게 찾아볼 수 있습니다.

하지만 요즘은 웹 사이트라고 부르지 않고 웹 애플리케이션으로 부릅니다. 그 이유가 뭘까요? 예전에는 단순히 정적인 정보만 보여주는 사이트가 많았습니다. 그때는 웹 사이트라는 이름이 더 잘 어울렸습니다. 하지만 지금은 웹상에서 정보를 입력하고, 그 정보가 바로바로 업데이트됩니다. 이렇게 유저의 특정 행동에 따라 동적으로 화면을 보여주기 때문에 웹 애플리케이션이라고 부르는 것입니다. 요즘 웹 애플리케이션은 쉽게 동적 인터페이스를 나타내줄 수 있습니다. 하지만 이런 동적 인터페이스에는 수많은 상태 관리가 필요합니다. 아래의 예시를 확인해주세요.

<div>
  <h1>Counter</h1>
  <h1 id="result">0</h1>
  <button onclick="plusNumber">Plus</button>
</div>

var result = document.getElementById('result');
var number = 0;

function plusNumber() {
  number += 1;
  result.innerHTML = number;
}

일반 HTML과 Javascript를 사용한다면 직접 Javascript에서 DOM에 접근하여 result라는 id를 가진 엘리먼트를 가져와 number 변수의 값을 넣어줘야 합니다. 만약 프로젝트에 위와 같은 DOM 접근 / 사용자와의 인터렉션이 많지 않다면 아무런 라이브러리를 사용하지 않고서도 충분히 작업이 가능합니다. 하지만 위와 같은 코드가 엄청나게 많아진다면 어떻게 해야 할까요? 물론 엄격하게 규칙을 정하거나 기능별로 파일을 분류한다면 불가능한 방법은 아닙니다. 하지만 수천 줄의 코드 또는 수백 개의 파일을 작성하는 것도, 유지 보수하는 것도 매우 힘든 일이 될 것입니다. 하지만 React와 같은 웹 라이브러리를 사용하면 DOM 관리와 같은 불편함을 최소화시켜줄 뿐만 아니라 코드를 더 간결하게 해줍니다.