React 개요

 

React.js는  Javascript 의 라이브러리로써,  자바스크립트를 더욱 쉽게 개발할수있게 나온 기술이다.

 

 

 

 

Jquery vs React?

 

이런 특징이 있다.

 

여기서 jQuery가 왜 더 느리고 ,  React가 좀 더 빠른지 코드를 보면 알 수 있다.

 

 

JQuery

 

여기서 JQuery문법은 사용되지않았지만,  실행되는 원리는 같다. (JQuery는 가독성좋게 체인형식으로바꿔주는것)

 

다음과같은 처리방식이다.

1. 우선, body에서 요소를 가져옴

2. 그 요소를 가져와서 만들어둔 함수를 이벤트리스너로 넣어줌.

3. 해당요소를 다시 html에 업데이트

 

한마디로 개발자가 직접  DOM 요소를 뽑아와 수정하고 뿌리는형식이다.

 

이와 같은 방식을 요청이 들어올때마다 반복한다.

 

React

 

React는 다음과같은 동작방식을한다.

 

1. Script내부에서 요소들을 만들음.

2. 가상돔 (ReactDom)으로  DOM을 조작하여 html에 렌더링을함 

 

동작을 한줄요약하자면,  개발자가 V-Dom을 조작하여 V-DOM에서 만들고픈 요소를 제작한 후,

"DOM에 표현해주세요"를  리액트에 요청하는거다.

 

Jquery처럼 Dom에 이미 표현된 요소를 가져와 업데이트 하는게아닌,

아예 처음부터 V-Dom에서 요소를 만들어서 Dom에 제공하는형식이다.   

리액트는 다음과 같을경우(반드시 필요한 경우)만 리렌더링(새로고침)을 한다.

다른경우는 리렌더링을 하지않아, 매우 빠르게 화면을 출력한다.

 

성능면에서 훨씬 우월할수없는이유가  리액트의 V-DOM에 의해 나온다.