[ REACT ] 리액트 이해, 렌더링과 Virtual DOM

한동안 뷰만 사용했고,

잠깐 사용했던 리액트 공부를 다시 시작할 예정이라

구매한 책을 싹 처음부터 훑어볼예정입니다.

책보면서 정리하면서 블로그에 올리려고 합니다 : )

 

리액트는 라이브러리고, 오직 뷰만 담당한다.

리액트는 프레임워크가 아니라 라이브러리고, 다른 프레임 워크가 라우팅등의 기능을 내장한 반면,

리액트는 오직 뷰만 신경 쓰는 라이브러리로 기타 기능은 라이브러리 등으로 구현해서 사용해야 한다.

 

그래서 원하는 라이브러리를 선택해서 사용할수 있지만 동시에 여러 라이브러리를 다루어야하는 단점이 있다.

그리고 리액트는 라이브러리기 떄문에 다른 웹 프레임워크나 라이브러리와 혼용해서 사용할 수 있다.

 

컴포넌트

재사용이 가능한 API로 수많은 기능들을 내장하고 있다.

컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동방식을 정의한다.

 

렌더링

사용자 화면에 View를 보여주는 것

초기렌더링 : 맨 처음 어떻게 보일지를 정하는 렌더링

//리액트에서는 render함수에서 초기렌더링을 다룬다.
render() { ... }

뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환

render함수 내부에 컴포넌트가 있으면 그 컴포넌트들도 재귀적으로 렌더링한다.

최상위 컴포넌트의 렌더링이 끝나면 지니고 있는 정보들을 사용하여 html을 만들고 이를 DOM안에 주입한다.

 

리렌더링

데이터가 업데이트될때 새로운 컴포넌트는 데이터를 가지고 render함수를 또다시 호출한다.

이때 뷰를 싹 갈아엎는것이 아니라 바뀐 부분만 실제DOM에 적용한다. ( 아래 Virtual DOM 내용 참고 )

 

 

DOM

DOM(document Object Model) 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성한다.

DOM을 조작할때마다 엔진이 웹페이지를 새로 그리기 때문에 업데이트가 너무 잦으면 성능이 저하되어 느려보일 수 있다.

 

Virtual DOM

실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다.

데이터 업데이트시, 전체 UI를 실제 DOM이 아닌 Virtual DOM에 리렌더링 하고, 

업데이트 이전의 Virtual DOM이랑 비교하여 바뀐부분만 실제 DOM에 적용한다.

 

참고로 Virtual DOM을 사용한다고 무조건 빠른것은 아니라고 하고,
단순한 라우팅 정도만 있는 간단한 페이지는 오히려 리액트를 사용하지 않는 편이 더 나은 성능을 보이기도 한다고..!

 

 

---

 

✔️ 참고

리액트를 다루는 기술 - 김민준 
https://book.naver.com/bookdb/book_detail.nhn?bid=15372757