리액트?
리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는데 사용
타 프레임워크가 MVC, MVVM, MVW 아키텍처 구조를 가지는 한편 리액트는 오직 V만 신경씀
컴포넌트
리액트 프로젝트에서 특정 부분이 어떻게 생길지를 정하는 선언체
다른 프레임워크에서 사용자 인터페이스를 다룰 때 사용하는 템플릿과는 다른 개념
템플릿이 보통 데이터셋이 주어지면 HTML 태그 형식을 문자열로 반환하는데
이와달리 컴포넌트는 좀 더 복잡한 개념
컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며
컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의
렌더링
사용자 화면에 뷰를 보여주는 것을 렌더링이라고 함
초기 렌더링
어떤 UI 관련 프레임워크, 라이브러리를 사용하든 맨 처음 어떻게 보일지를 정하는 초기 렌더링이 필요
리액트에서는 이를 다루는 render 함수가 존재
render() {...}이 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할
뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환
리액트의 특징
Virtual DOM
리액트의 주요 특징 중 하나는 Virtual DOM을 사용하는 것
DOM이란?
객체로 문서 구조를 표현하는 방법
ex) html, XML
최근 웹 애플리케이션들의 규모가 커짐에 따라 데이터를 표현하는 요소가 증가하여 성능 저하
DOM을 최소한으로 조작하여 작업을 처리함으로서 성능 개선
Virtual DOM
Virtual DOM을 사용하면 실제 DOM에서 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용
리액트에서 데이터가 변화하여 DOM을 업데이트 하는 과정
- 데이터를 업데이트 하면 전체 UI를 Vritual DOM에 리렌더링
- 이전 Vritual DOM에 있던 내용과 현재 내용을 비교
- 바뀐 부분만 실제 DOM에 적용