리액트를 다루는 기술-1

왜 리액트인가?

• 자바스크립트만으로도 규모가 큰 어플리케이션을 만들수 있는 시대가 됐음
  • 개인 컴퓨터 성능이 좋아짐
  • 브라우저마다 달랐던 것들을 표준화 함 (EcmaScript)
  • 모듈화 작업을 표준화함 (CommonJS, ESM, AMD)
  • 웹서버와 비동기적 데이터 교환이 가능해짐 (AJAX)
  • javascript history
  • NAVER D2
• 성능을 아끼고 편안한 사용자 경험을 제공하면서 구현하고자 개발한 것
• 다른 프레임 워크와의 비교를 해보아야 결론이 날 것 같음!

 

---

 

 

리액트 이해

1. 오직 view만 신경쓰는 라이브러리

2. 초기 렌더링

• render 함수가 이를 다룸, 뷰의 작동과 구성에대한 정보를 지닌 객체를 반환
• → 최상위 컴포넌트의 렌더링 작업이 끝나면 html을 만들고 실제 DOM에 주입

3. 조화과정(reconciliation)

• render 함수가 이를 다룸
• 새로운 데이터를 가지고 있는 객체를 반환하고 이전의 트리와 다른 부분을 비교하여 둘의 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트 함

 

---

 

virtual DOM

1. DOM: Document Object Model

• html은 본래 문자열로 되어 있지만 자바스크립트에서 다루기 쉽도록 브라우저에서 구조적으로 만들어준 객체모델

2. virtual DOM이 필요한 이유

• DOM에 변화가 일어나면서 웹브라우저가 다시 연산하고 레이아웃 구성하고 페이지를 리페인트 하는데 이 과정에 시간 허비가 일어나 느려짐 ( 브라우저 렌더링 과정)
• DOM을 최소한으로 조작하여 작업을 처리하도록 하기 위해서 생김→ 실제 DOM과 달리 virtual DOM은 화면에 쓰지 않기 때문에 생성 비용이 저렴함
• → reconciliation을 통해 차이를 알아내어 그 부분만 업데이트함
• 실제 DOM의 업데이트를 최소화 하기 위해 사용