[React JS] 리액트를 다루는 기술 - 리액트 시작

 

1. 리액트 이해

리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는데 사용하며, 오직 View 만 신경 쓰는 라이브러리이다.

 

<컴포넌트>

: 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체

: 재사용이 가능한 API

: 수 많은 기능들을 내장하며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의

 

<렌더링>

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

 

리액트 라이브러리는 데이터가 변할 때마다 새롭게 리렌더링 하면서 성능을 아끼고 최적의 사용자 경험을 제공하며 뷰를 렌더링한다.

 

<< 초기 렌더링 >>

맨처음에 어떻게 보일지를 정하는 초기 렌더링이 필요하다. 리액트에서는 render() 함수를 이용해 이를 다룬다.

render(){...}

render() 함수

: 컴포넌트가 어떻게 생겼는지 정의하는 역할. 

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

 

컴포넌트 내부에 또다른 컴포넌트가 들어갈 때, render() 함수는 내부에 있는 컴포넌트들도 재귀적으로 렌더링한다. 최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보를 사용해 HTML 마크업을 만들고, 실제 페이지의 DOM 요소 안에 주입한다.

 

=> 컴포넌트를 실제 페이지에 렌더링 할 때 분리된 두가지 절차: 문자열 형태의 HTML 코드 생성 후, 특정 DOM에 해당 내용 주입하면 이벤트 적용된다.

 

 

<< 조화과정(업데이트) >>

리액트에서 뷰를 업데이트 할 때) "업데이트 과정을 거침" == "조화 과정을 거침"

 

컴포넌트에서 데이터 변화가 있을시 뷰가 변형되는 것이 아닌 새로운 요소로 갈아 끼워지는 것이다.

이는 render() 함수가 수행한다.

컴포넌트가 데이터를 업데이트 했을 때, 새로운 데이터를 가지고 render() 함수를 호출하며 그 데이터를 지닌 뷰가 생성한다.

 

이 때 render() 함수가 반환한 결과가 바로 DOM에 반영되는 것이 아닌, 이전에 render() 함수가 만들었던 컴포넌트 정보와 새로운 데이터를 이용해 render() 함수가 만든 컴포넌트 정보를 비교한다.

-> 자바스크립트를 사용해 두 가지 뷰를 최소한의 연산으로 비교 후, 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트 한다.

 

 

2. 리액트 특징

리액트는 Virtual DOM을 사용한다.

 

<Virtual DOM>

 

<< DOM >>

 

DOM(Document Object Model)은 객체로 문서 구조를 표현하는 방법이다.

주로 XML이나 HTML로 작성하며, 웹 브라우저는 DOM을 활용해 객체에 JS와 CSS를 적용한다.

DOM은 트리 형태로, 특정 노드를 찾기, 수정, 제거, 원하는 곳에 삽입 가능하다.

 

DOM은 빠르다. 하지만, 웹 브라우저에서 DOM 변화가 일어나면( CSS 연산, 페이지 리페인트 등) 시간기 많이 소요된다.

=> DOM을 최소한으로 조작하여 처리해야 한다.

 

=> 리액트는 Virtual DOM을 사용해 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행한다.

 

 

<< Virtual DOM >>

Virtual DOM은 실제 DOM에 접근하여 조작하는 것이 아닌, 추상화한 자바스크립트 객체(실제 DOM의 가벼운 사본과 같은 것)를 구성하여 사용한다.

 

▶ 웹 브라우저의 실제 DOM 업데이트 할 때 3가지 절차

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

 

리액트와 Virtual DOM은 UI를 업데이트하는 과정에서 더욱 쉽게 업데이트에 접근할 수 있게 해준다.

 

 

< 기타 특징 >

: 리액트는 오직 뷰만 담당하며, 프레임워크가 아닌 라이브러리이다.

리액트는 뷰만 신경쓰는 라이브러리이기 때문에, 기타 기능은 직접 구현해야 한다.

 

: 리액트는 다른 웹 프레임워크나 라이브러리와 혼용할 수 있다.