[React] 프론트엔드 라이브러리

웹은 단순한 웹이 아니라 웹 애플리케이션이다.

-> 브라우저상으로 자연스럽게 매우 많은 것을 할 수 있음.

어떠한 유저 인터페이스를 동적으로 나타내기 위해 수많은 '상태'를 관리해야 한다.

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

버튼을 눌러 숫자0의 값을 바꿔주려면 각 DOM element에 대한 레퍼런스를 찾고, 해당 DOM에 접근하여 원하는 작업을 아래와 같이 해야함 

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

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

 

프로젝트의 규모가 커지고 유저들과의 인터렉션이 있다면 프론트엔드 라이브러리가 필수에 가까워진다. 

생산성 증대, 높은 유지보수성.

삼대장은 리액트, 앵귤러, 뷰 세가지가 있음.

그 중 리액트.

리액트는 컴포넌트에 집중된 라이브러리(프레임워크가 아님)

데이터를 넣으면 지정한 인터페이스를 조립해서 보여주는 역할

앵귤러와 달리 사용자에게 전달되는 뷰만 신경쓰고 나머지 기능은 써드파티 라이브러리에 맡김.

 

리액트는 지속해서 데이터가 변화하는 대규모 애플리케이션을 구축하기 위해 만듦

-> Mutation(변화)를 포기하고 데이터가 바뀌었을 때 뷰를 날려버리고 새로 뷰를 만들어보자 라는 생각으로 만듦.

-> 성능적으로 문제가 생기지만, Virtual DOM(가상의 DOM) 변화가 일어나면 새로운 DOM이 아닌, JS로 이루어진 가상의 DOM에  한번 렌더링 후, 기존의 돔과 비교하여 변화가 필요한 곳만 업데이트 해줌.

 

양방향바인딩 모델의 값이 변하면 view의 값을 변하게, 또 view의 값이 변하면 모델의 값이 변하게 하는 것.