[react] 1.1 react란

리액트를 다루는 기술(김민준 지음)의 내용을 바탕으로 작성되었습니다.

React

React는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용한다. MVC, MVVM, MVW 등의 구조를 이용하는 다른 프레임워크들과 달리 ==오직 View 만 신경쓰는 라이브러리==이다. 최대한 성능을 아끼고 편안한 사용자 경험을 제공하면서 구현한다.

위의 문장은 리액트 매뉴얼에 있는 문장이다. 리액트를 사용한다고 해서 무조건 빠른 것은 아니다. 결국 적절한 곳에 사용해야 진가를 발휘할 수 있다. 그러나 Virtual DOM을 사용함으로써 UI를 업데이트하는 과정에서 생기는 복잡함을 모두 해소하고 더욱 쉽게 업데이트에 접근할 수 있다는 장점이 있다.

1. Component

특정 부분이 어떻게 생길지 정하는 선언체로 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의한다.

2. 렌더링

사용자 화면에 뷰를 보여주는 것을 말한다.

2.1. 초기 렌더링

맨 처음 어떻게 보일지를 정하는 것을 말한다. 리액트에서는 이를 다루는 render 함수가 있다.

render 함수는 컴포넌트가 어떻게 생겼는지 정의하며, 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환한다. 컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 있으며 이 때 render 함수를 실행하면 내부의 컴포넌트들도 재귀적으로 렌더링한다.

최상위 컴포넌트의 렌더링 작업이 끝나면 가지고 있는 정보들로 HTML 마크업을 만들고 실제 페이지의 DOM요소 안에 주입한다.

render() {....}

React의 특징

1. 프레임워크가 아닌 ==라이브러리==이다.

2. Virtual DOM을 사용한다.

DOM이란?

• Document Object Model
• 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성한다. DOM은 트리 형태로 특정 노드 검색, 수정, 제거, 삽입이 자유롭기 때문에 웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용한다.
• But DOM은 동적 UI에 최적화 되어있지 않다. DOM자체의 성능은 빠르지만 웹 브라우저에서 DOM에 변화가 일어나면 웹 브라우저가 다시 CSS를 연산하고, 레이아웃을 구성하고, 페이지를 리페인트 하는 과정에서 시간이 오래걸리게 된다. 따라서 페이스북과 같은 대규모 웹 애플리케이션에서 DOM을 사용하는 경우 성능이 저하될 수 있고, 이를 해결하기 위하여 Virtual DOM 방식을 이용한다.

Virtual DOM

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

리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트하는 과정

1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다.
2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.
3. 바뀐 부분만 실제 DOM에 적용한다.