[React] React란? React의 특징

React란?

: Meta(구 Facebook)이 개발한 UI 라이브러리

 

주요 특징 Keyword

(1) 컴포넌트 기반 구조

(2) Virtual DOM 바탕의 성능 최적화

(3) SPA 개발에 필요한 기능과 도구를 제공

=> SPA(Single Page Application) : 하나의 HTML 페이지를 처음에 로드한 뒤, 페이지 이동이나 추가 데이터가 필요할 때 자바스크립트를 이용해 서버와 소통하여 필요한 부분만 업데이트하는 방식

 

React의 특징

1) 컴포넌트를 기반으로 UI를 표현할 수 있음 

-> 유지 보수 측면에서 매우 효율적임

-> 페이지를 컴포넌트 단위로 개발할 수 있음 

 

2) 화면 업데이트 구현이 쉬움

-> 리액트는 선언형 프로그래밍(목적만 깔끔하게 명시, 코드가 간결함)의 방식으로 동작함

==> 업데이트를 위한 복잡한 동작을 직접 정의할 필요 없이 특정 변수의 값을 바꾸는 것 만으로도 화면을 업데이트 시킬 수 있음! 

 

3) 화면 업데이트가 빠르게 처리됨

-> JS로 이뤄진 코드에서 성능, 속도를 위해 DOM 최소화 할시에는 , 동시에 발생한 업데이트를 모아서 한꺼번에 수정해야함

 ==> 서비스 규모가 커질수록 힘들어짐!

 

===> 리액트는 Virtual DOM을 사용하여, 이 과정(DOM수정 횟수 최소화) 을 자동으로 해줌! 

<브라우저의 렌더링 과정> 설명 참고 - https://challenge-change.tistory.com/174

(virtual DOM : 리액트는 업데이트가 발생하면 실제 DOM을 수정하기 전에 이 가상의 복제판 DOM에 먼저 반영해봄) 

-> virtual DOM에 업데이트가 한번에 다 모여 1번의 DOM 수정만 실시할 수 있음! 

 

4) Virtual DOM 프레임워크의 상태 관리 

상태 관리는 컴포넌트의 데이터 상태를 의미하며, 화면 변경 시 필요한 데이터를 state로 정의

=> 데이터 변경 시 관련 DOM만 갱신해 불필요한 접근을 줄임

•