리액트 이해
- 리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용
- View만 신경 쓰는 라이브러리
리액트에서 특정 부분이 어떻게 생길지 정하는 선언체를 컴포넌트 라고 한다.
사용자 화면에 뷰를 보여 주는 것을 렌더링이라고 한다. 렌더링에는 리액트 컴포넌트가 최초로 실행한 초기 렌더링과 컴포넌트의 데이터 변경으로 다시 실행되는 리렌더링이 있다.
초기 렌더링
render() {...}
- 컴포넌트가 어떻게 생겼는지 정의하는 역할
- html 형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환한다.
컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 있어서 render 함수를 실행하면 내부 컴포넌트들은 재귀적으로 렌더링한다.
최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업을 만들고, 이를 실제 페이지의 DOM 요소 안에 주입한다.
조화 과정
리액트에서 뷰를 업데이트 할 때 "조화 과정(reconciliation)을 거친다"고 한다.
컴포넌트에서 데이터에 변화가 있을 때 우리가 보기엔 뷰가 변형되는 것처럼 보이지만 사실은 새로운 요소로 갈아 끼우는 것이다.
데이터를 업데이트했을 때 새로운 데이터를 가지고 render 함수를 호출한다. render 함수가 반환하는 결과를 곧바로 DOM에 반영하지 않고, 이전에 render 함수가 만들었던 컴포넌트 정보와 현재 만든 컴포넌트 정보를 비교 -> 두 가지 뷰를 최소한의 연산으로 비교한 후 둘의 차이를 알아내 DOM 트리를 업데이트
리액트의 특징
리액트는 Virtual DOM을 사용한다.
Virtual DOM
DOM(Document Object Model)
- 객체로 문서 구조를 표현하는 방법으로 HTML이나 XML로 작성한다.
- 웹 브라우저는 DOM을 활용해 객체에 js와 css를 적용
- 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입 가능
DOM을 조작할 때마다 엔진이 웹페이지를 새로 그리기 때문에 업데이트가 너무 잦으면 성능이 저하된다.
-> DOM을 최소한으로 조작하여 작업을 처리하는 방식으로 개선 가능
Virtual DOM
리액트는 Virtual DOM방식을 사용하여 DOM업데이트를 추상화함으로써 처리 횟수를 최소화하고 효율적으로 진행한다.
실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다.
리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트 할 때의 절차
- 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다.
- 이전 Virtual DOM에 있던 내용과 현재 내용을 비교
- 바뀐 부분만 실제 DOM에 적용한다.
