특징 1. 컴포넌트를 기반으로 UI표현
선언형 프로그래밍 -> 리액트 ( 목적만 깔끔히 명시 , 코드 간결 )
명령형 프로그래밍 -> 자바스크립트 ( 모든과정을 하나 하나 다 설명 , 코드가 길고 복잡 )
선언형 프로그래밍?(리액트)
목적만 깔끔히 명시하여 코드가 간결해짐
ex) 토마토파스타 하나 주세요 .
명령형 프로그래밍?(자바스크립트)
목적을 이루기 위한 모든 과정을 설명
ex) 면 100그람을 꺼내 뜨거운물에 9분동안 삶고 후라이팬에 올려서 양념을 ... 해서 저에게 가져다 주세요 .
특징 2. 화면 업데이트 구현이 쉽다.
페이지를 컴포넌트 단위로 구현함 각각의 컴포넌트에는 스테이트라는 현재 상태를 저장하는 특수한 변수를 저장가능
컴포넌트가 바뀐 스테이트 값을 따서 화면을 렌더링하도록 만들어줌.
-> 리액트에서는 업데이트에 필요한 복잡한 동작들을 특정 변수의 값만 바꿔주면 선언형 방식으로 변수의 값에 따라서 화면을 업데이트 시킬수있음
특징 3. 화면업데이트가 빠르다.
브라우저의 렌더링 과정 (critical Rendering Path)
1. HTML / CSS 를 각각 DOM과 CSSObjectModel으로 변환시킴 (DOM 이란 브라우저가 이해하기 쉬운 방식으로 변환한 객체 모델 CSS또한 같은 맥락)
2. DOM과 CSSOM을 합쳐서 RenderTree 를 만듦( 청사진 , 설계도 느낌 )
DOM은 위치 , 배치 , 모양에 관한 정보 - CSSOM은 스타일에 관한 정보
3. Layout -> 요소의 배치를 잡는 작업
4. Painting -> 요소를 실제로 페이지에 그려내는 과정
페이지 업데이트 과정?
자바스크립트가 DOM을 수정하면 생김 -> 처음부터 다시 브라우저의 렌더링 과정을 반복함 Layout을 반복 -> Reflow , Painting을 반복 -> RePaint < 이과정이 오래걸림
-> 결국 페이지를 업데이트할때마다 처음부터 다시 렌더링 과정을 거치면서 시간이 꽤 걸리고 심할경우 페이지에 과부하가 걸림
발생한 업데이트를 모아서 한꺼번에 종합 후에 한번에 수정해서 dom으로 내보내면 빠르게 업데이트가 가능하다.
react에서는 이 과정을 자동으로 해준다. (Virtual DOM)
Virtual DOM : 말 그대로 가상의 DOM , 업데이트들을 모아놓아서 Virtual DOM에 계속 적용함 , 모든 변경사항이 저장되었다면 Actual DOM에 반영
결론적으로 한번만 DOM을 업데이트하여 화면의 업데이트가 빨라지고 유지보수에도 능하다!