[React] 1. 리액트 시작과 특징

리액트 시작과 특징

---

리액트란?

최대한 성능을 아끼고 편안한 사용자 경험(user experience) 을 제공하면서 구현하고자 개발한 것이 리액트(React)입니다.

리액트는 JavaScript의 라이브러리로 사용자 인터페이스를 만드는데 사용합니다. 

 

1. 컴포넌트(component)

- 특정 부분이 어떻게 생길지 정하는 선언체입니다.

- 재사용이 가능한 API로 수많은 기능 등을 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동방식을 정의합니다.

 

2. 렌더링(rendering)

- 사용자의 화면에 뷰를 보여주는 것입니다.

- 초기 렌더링 : render() 함수 => 컴포넌트가 어떻게 생겼는지 정의하는 역할을 합니다. 

   이 함수는 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환합니다. 

   컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 있습니다. 

   이때 render 함수를 실행하면 그 내부에 있는 컴포넌트들도 재귀적으로 렌더링합니다. 

   이렇게 최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업을 만들고,

   이를 개발자가 정하는 실제 페이지의 DOM(Document Object Model) 요소 안에 주입합니다. 

   문자열 형태의 HTML 코드를 생성한 후 특정 DOM에 해당 내용을 주입하면 이벤트가 적용됩니다. 

 

※ DOM(Document Object Model) 이란?

웹 페이지에 대한 인터페이스입니다. 

기본적으로 여러 프로그램이 페이지의 컨텐츠 및 구조, 스타일을 읽고 조작할 수 있도록 API 를 제공합니다.

DOM 은 HTML이 아니고, 브라우저에 보이는 것도 아닙니다. HTML 문서에 대한 인터페이스입니다.

즉 객체로 문서 구조를 표현하는 방법으로서, XML 이나 HTML 로 작성합니다. 

항상 유효한 HTML 형식이고, JavaScript 에 수정될 수 있는 동적 모델입니다. 

 

아래는 DOM tree 의 구조입니다.

 

DOM tree 구조

 

 

3. 조화과정

리액트에서 뷰(View) 를 업데이트할 때에는 '업데이트를 한다' 라는 표현보다는 '조화과정(reconciliation)을 거친다' 라는 것이 더 정확한 표현입니다.

컴포넌트(component)에서 데이터에 변화가 있을 때 개발자가 보기에는 변화에 따라 뷰(View)가 변형되는 것처럼 보이지만,

실제로 새로운 요소로 갈아끼우기 때문입니다.

이 작업 또한 render 함수가 맡아서 합니다. 

컴포넌트는 데이터를 업데이트 했을 때 단순히 업데이트 하는 값을 수정하는 게 아니라, 새로운 데이터를 가지고 render 함수를 또 다시 호출합니다. 

but! 이때 render 함수가 반환하는 결과를 곧바로 DOM 에 반영하지 않고, 이전에 render 함수가 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교합니다. 

JavaScript 를 사용해서 2가지의 뷰를 최소한의 연산으로 비교한 후, 2개의 차이를 알아내서 최소한의 연산으로 DOM 트리를 업데이트하는 것입니다! 

 

 

React 특징 

1. Virtual DOM

리액트의 주요 특징 중 하나는 Virtual DOM 을 사용하는 것입니다.

DOM을 조작할 때마다 엔진이 웹 페이지를 새로 그리기 때문에 업데이트가 빈번히 발생할 경우 성능이 저하될 수 있습니다. 

리액트는 Virutal DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행합니다.

 

※ 리액트가 DOM 업데이트하는 3가지 절차

• 데이터를 업데이트하면 전체 UI 를 Virtual DOM 에 Re-Rendering 합니다.
• 이전 Virtual DOM 에 있던 내용과 현재 내용을 비교합니다.
• 변경된 부분만 실제 DOM 에 적용합니다. 

결국 리액트와 VIrtual DOM 은 업데이트 처리의 간결성을 제공합니다.

그렇기 때문에 간단한 작업을 할 때에는 리액트를 사용하지 않는 것이 더 나은 성능을 보이기도 합니다. 

 

리액트는 프레임워크가 아니라 라이브러리임을 잘 기억해야 합니다! 

 

 

◆ 참고

1. https://medium.com/@wooder2050/%EC%9D%B4%EB%A1%A0-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-dom-%ED%8A%B8%EB%A6%AC-96ca3008a474
2. 리액트를 다루는 기술-개정판