React 이해, 특징
리액트 기초
리액트는 페이스북 개발 팀이 만든 자바스크립트 라이브러리입니다.
기존의 어떤 데이터가 변할 때마다 어떤 변화를 주는 방식이 아닌 기존 뷰를 날려 버리고 새로 렌더링하는 방식입니다.
리액트 이해
리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용합니다.
구조가 MVC(Model-View-Controller), MVW(Model-View-Whatever) 등인 프레임워크와 달리,
오직 V(View)만 신경 쓰는 라이브러리입니다.
컴포넌트(component)
리액트 프로젝트에는 특정 부분이 어떻게 생길지 정하는 선언체가 있는데, 이를 컴포넌트(component)라고 합니다.
컴포넌트는 다른 프레임워크에서 사용자 인터페이스를 다룰 때 사용하는 템플릿과는 다른 개념입니다.
템플릿은 보통 데이터셋이 주어지면 HTML 태그 형식을 문자열로 반환하는데,
컴포넌트는 재사용이 가능한 API로 수만은 기능을 내장하고 있고, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의합니다.
렌더링(rendering)
사용자 화면에 뷰를 보여주는 것을 렌더링이라고 합니다.
리액트 라이브러리는 데이터가 변할 때마다 새롭게 리렌더링 하면서도 성능을 아끼는 렌더링 방식을 사용하는데 이를 이해하려면
리액트 컴포넌트가 최초로 실행한 “초기 렌더링”과
컴포넌트의 데이터 변경으로 다시 실행되는 “리렌더링”을 이해해야 합니다.
초기 렌더링
어떤 UI 관련 프레임워크, 라이브러리를 사용하든지 맨 처음 어떻게 보일지를 정하는 초기 렌더링이 필요합니다.
리액트에서는 이를 다루는 render 함수가 있습니다.
render() {…}
render()함수는 컴포넌트가 어떻게 생겼는지 정의하는 역활을 합니다.
render()함수는 HTML 형식의 문자열을 반환하는 것이 아닌 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환합니다.
조화 과정
리액트에서 뷰를 업데이트할 때는 “업데이트 과정을 거친다”라고 하기보다 “조화 과정(reconsiliation)을 거친다”라고 합니다.
컴포넌트에서 데이터에 변화가 있을 때 변화에 따라 뷰가 변형되는 것처럼 보이지만, 사실은 새로운 요소로 갈아 끼우기 때문입니다.
이 작업 또한 render 함수가 맡아서 합니다.
컴포넌트는 데이터를 업데이트했을 때 업데이트한 값을 수정하는 것이 아니라, 새로운 데이터를 가지고 render 함수를 또다시 호출합니다.
이 작업에서 render 함수가 반환하는 결과를 곧바로 DOM에 반영하지 않고
이전에 render 함수가 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교합니다.
리액트 특징
리액트의 주요 특징 중 하나는 Virtual DOM을 사용하는 것입니다.
DOM
DOM(Document Object Model)은 문자 그대로 문서 객체 모델입니다.
객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성합니다.
DOM은 트리 구조이므로 특정 노드를 찾거나, 수정, 제거, 원하는 곳에 삽입할 수 있습니다.
웹에서 DOM에 변화가 일어나면 웹 브라우저는 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트하게 되고 성능 저하가 일어날 수 있습니다.
이러한 DOM을 최소한으로 조작하여 처리하는 방식으로 나온 방법이 Virtual DOM입니다.
Virtual DOM
리액트는 Virtual DOM 방식을 사용하여 실제 DOM에 접근하여 조작하는 대신 DOM 업데이트를 추상화한 자바스크립트 객체를 구성하여 사용함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행합니다.
리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트를할 때는 다음 3가지 과정을 거칩니다.
데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링합니다.
이전 Virtual DOM에 있던 내용과 현제 내용을 비교합니다.
바뀐 부분만 실제 DOM에 적용합니다.
오른쪽의 “새로운 DOM 트리”가 바로 Virtual DOM입니다.