[React] 리액트란 (누구든지하는 리액트 1편 공부정리)

* velopert님글 누구든지하는 리액트 1편: 리액트는 무엇인가를 공부하며 정리한 글 

출처: velopert.com/3612

 

페이스 북은 왜 리액트를 만들었는가

 

기존 다른 프레임워크들은 MVC, MVVM 패턴은 바탕으로 이뤄짐 

공통점은 모델이다 (데이터) 

 

대부분의 프레임 워크들은 양방향 바인딩을 통해 모델에 있는 값이 변하면 뷰에서도 이를 변화시켜준다

 

변화 (Mutation)

 

특정 이벤트가 발생하여 모델에 변화를 일으킬 때 어떤 DOM을 가져와서 어떻게 뷰를 업데이트할 지 로직을 정해줘야 한다 => 페이스북은 변화(Mutation)을 하지 말고 아예 기존 뷰를 날리고 새로 뷰를 만들어버림 

 

하지만 진짜로 항상 view를 새로 만들어주면 성능 상의 부담이 있다

 

해결책은 virtual DOM

 

변화가 일어나면 실제 DOM에 바로 적용하지 않고 자바스크립트로 이루어진 가상 DOM에 한번 렌더링하고

기존의 DOM과 비교를 하고 실제로 변한 부분만 갈아끼운다 

 

virtual DOM을 이용해 어떻게 업데이트를 시켜줄지 고민하지 않고 일단 바뀐 대로 그려놓은 다음 실제로 바뀐 부분만

실제 DOM에 반영한다

 

[virtual DOM 추가 공부 - velopert님 글] 왜 virtual DOM인가? 

velopert.com/3236

 

[저의 요약정리]

2020/09/28 - [React공부] - React의 Virtual DOM에 대해 알아보자

 

대략 정리: DOM에 변화가 생기면 렌더트리를 재생성(모든 요소 스타일이 다시 계산됨)하고 레이아웃만들고 페인팅하는 과정이 반복된다. (DOM 조작이 많아질 수록 느려진다. virtual DOM은 최종적인 변화 결과만 DOM에 전달하기 때문에(여러 변화를 하나로 묶어서 전달한다) 연산을 줄여주기 때문에 속도를 개선할 수 있다)

virtual DOM은 실제로 어디가 변했는 지 자동으로 파악하고 바꿔주는 자동화, 추상화 역할을 한다.