what-is-react.md

[React] React 란? (1)

• 간단하게 counter 를 조작하는 거를 pure javascript 로 화면을 구현한다고 생각해보자.
• 아래와 같이 HTML 문법과 그리고 이를 조작하기 위한 JavaScript 를 이용해서 DOM 을 조작해야 할것이다.

<div>
    <h1>Counter</h1>
    <h2 id="number">0</h2>
    <button id="increase">+</button>
  </div>

• 예를 들어서 위와 같이 counter 를 올리는 경우를 가정해보자.
• 만약 버튼이 눌렸을 때 숫자 0 을 올리기 위해서는 아래와 같이 javascript 코드를 작성해주어야 한다.

var number = 0;
var elNumber = document.getElementById('number');
var btnIncrease = document.getElementById('increase');

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

• Dom 에 접근해서 해당 element 를 직접 수정하고, 보이는 화면을 직접 건들여서 수정하는 것이다.
• 하지만, 만약에 프로젝트가 간단하지 않고 커진다면 어떨까? 하나의 코드 파일내에서 화면을 표현하기 위한 HTML 문법도 점점 커져갈 것이고, 그러한 HTML 태그를 DOM 을 이용해 조작, 업데이트 하는 것들도 커져갈 것이다.
• 이러다 보면 나중에는 유지보수하는데에 있어서 상당한 어려움을 겪게 될 수 있다.
• 이런 DOM 을 조작하고 업데이트 하는 작업들을 최소화 하고 개발자는 단지 기능 개발에 좀 더 집중할 수 있도록 도와주는 라이브러리들이 생겨났는데, 리액트, 앵귤러, Vue 등이 그러한 프레임워크 라이브러리들 이다.

라이브러리 / 프레임워크

• 현재 대표적인 라이브러리 및 프레임워크는 앵귤러, 리액트, 뷰 등이 있다.
• 각각의 특징을 살펴보자.
• 앵귤러
  • 앵귤러는 프레임워크다.
  • HTTP 클라이언트, 라우터등 웹 프로젝트에 필요한 것이 내장되어있다.
  • 현재 앵귤러 1과 앵귤러 2가 있다.
• 리액트
  • 페이스북에서 개발하였다.
  • 컴포넌트 개념에 집중되어 개발되었다.
  • 컴포넌트는 간단하게 설명하자면 하나의 화면 모듈로 데이터 바인딩에 따라서 변하는 작은 화면단위이다.
  • 이런 컴포넌트는 다른 컴포넌트에서 로드 되어서 재사용될 수 있다.
  • 리액트는 프레임워크라기보다는 라이브러리 이고, 라우터 기능, HTTP 요청 등 필요한 라이브러리는 직접 디펜던시에 추가하여 사용하여야 한다.
  • 상태 관리 라이브러리로 대표적으로 redux 가 있다.
• 뷰
  • 뷰는 리액트와 비슷하게 컴포넌트 개념에 집중되어 개발되었고, vue 에서는 template 라는 컴포넌트가 존재한다.
  • template 내부에서 html, style, javascript 를 하나의 파일로 관리할 수 있다.
  • 상태 관리 라이브러리로는 vuex가 있다.
  • 일반적으로 초보자들이 입문하기에도 러닝커브가 낮다는 것이 장점이다.