TIL wecode 15. Basic React 1

기존의 DOM을 이용하여 이벤트를 구현할 때
var number = 0;
var elNumber = document.getElementById('number');
var btnIncrease = document.getElementById('increase');

btnIncrese.onclick = function() {
  number++;
  elNumber.innerText = number;
}

리액트를 이용하여 이벤트를 구현할 때
<div>
  <h1>Counter</h1>
  <h2 id="number">0</h2>
  <button id="increase">+</button>
</div>

리액트란

We build React to solve one problem:
building large applications with data that changes over time.

간단하게 말해 리액트는 자바스크립트 라이브러리이고 개발자로 하여금 재사용 가능한 UI를 생성할 수 있게 합니다.

이 라이브러리는 virtual DOM을 사용하여 상태의 변함에 따라 선택적으로 유저 인터페이스를 렌더링합니다. 따라서 최소한의 DOM처리로 컴포넌트를 업데이트할 수 있게 해줍니다.

리액트 특징

• JSX: JavaScript의 확장버전으로, HTML과 비슷하게 생겼고 js파일 내에서 작성할 수 있다.
• Components: props를 input으로 하고 UI가 어떻게 보여야 하는지 정의하는 React Element를 output으로 하는 함수이다.
• 단일방향 데이터 흐름: 리액트에서는 데이터가 단일방향으로만 흐른다. 데이터 흐름을 단방향으로 제한함으로서 데이터를 추적하기 쉽고 디버깅을 쉽게 해준다.

리액트 장점

• 리액트는 JavaScript 객체 형태의 Virtual DOM을 사용하기 때문에 어플리케이션의 성능이 향상된다. (JavaScript Virtual DOM 처리는 실제 DOM보다 빠르다)
• Component의 가독성이 매우 높고 간단하기 때문에 유지보수가 쉽다. 뿐만 아니라 UI 수정 및 재사용이 용이하다.