작업환경 세팅

Node.js 설치

Yarn 설치

React

<aside> 💡 페이스북이 만든 사용자 UI 구축을 위한 라이브러리 입니다. 오직 사용자의 View 에만 초점을 맞추고 있습니다.

</aside>

React는 어떻게 해서 만들어 졌는가?

우리가 이전까지 했던 코드를 봐봅시다.

버튼을 클릭하면 숫자가 증가/감소 하는 코드입니다.

<h2 id="number">0</h2>
<div>
  <button id="increase">+1</button>
  <button id="decrease">-1</button>
</div>

const number = document.getElementById("number");
const increase = document.getElementById("increase");
const decrease = document.getElementById("decrease");

increase.addEventListener("click", function () {
  const current = parseInt(number.innerText, 10);
  number.innerText = current + 1;
});

decrease.addEventListener("click", function () {
  const current = parseInt(number.innerText, 10);
  number.innerText = current - 1;
});

익숙하시죠?

만약에 인터렉션이 자주 발생하고, 이에 따라 동적으로 UI를 표현해야 된다면, 이러한 규칙이 정말 다양해질 것이고, 그러면 관리하기도 힘들어질 것입니다.

대부분의 경우 웹 애플리케이션의 규모가 커지면, 이렇게 DOM을 직접 건드리면서 작업을 하면 코드가 난잡해지기 쉽습니다.