1# 리액트 시작

GitHub - gilbutITbook/080203: 리액트를 다루는 기술 개정판

(본 포스팅은 위의 리액트를 다루는 기술(개정판)을 기반으로 작성했습니다.)

 

 

 

 

 

• 자바스크립트 기반 프레임워크 : 주로 MVC(Model-View-Controller) 아키텍처, MVVM(Model-View-View Model) 아키텍처를 사용한다.
• MVC, MVVM, MVM 의 공통점 : 모델과 뷰를 있다.

 

• 모델 : 애플리케이션에서 사용하는 데이터를 관리하는 여역
• 뷰 : 사용자에게 보이는 부분

 

 

---

'리액트 이해'

• 리액트 : 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용하며, 구조는 오직 View만 신경쓰는 라이브러리
• 컴포넌트 : 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체
• 컴포넌트 정의 : 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며, 컴포넌트 하나에서 생김새와 작동 방식을 정의
• 렌더링 : 사용자 화면에 뷰를 보여 주는 것
• 초기 렌더링 : 최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업을 만들고, 이를 우리가 정하는 실제 페이지의 DOM 요소 안에 주입
• render() 함수 : 컴포넌트가 어떻게 생겼는지 정의하는 역할이다. html 형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 작동하지는지에 대한 정보를 지닌 객체를 반환
• 조화 과정 : render() 함수가 반환하는 결과를 곧바로 DOM에 반영하지 않고, 이전에 render 함수가 만들었던 컴포넌트 정보와 현재 redner() 함수가 만든 컴포넌트 정보를 비교

 

두 DOM 비교

DOM 트리의 차이를 확인 → 전체 컴포넌트를 처음부터 다시 렌더링하는 것처럼 보이지만, 최적의 자원을 수행하는 것

• DOM(Document Object Model) : 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성하며, 트리 형태로 특정 노드를 찾거나 수정하고 제거하거나 원하는 곳에 삽입 가능

 

---

문제점 ?

HTML 마크업을 시각적인 형태로 변환하는 것은 웹 브라우저가 하는 주 역할이기 때문에, 이를 처리할 때 컴퓨터 자원을 사용하는 것은 어쩔 수 없다. DOM을 조작할 때마다 엔진이 웹 페이지를 새로 그리기 때문에 업데이트가 너무 잦으면 성능 저하가 일어날 수 있다.

 

해결법 ?

DOM을 최소한으로 조작하여 작업을 처리하는 방식으로 개선할 수 있다. 리액트는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행한다.

 

---

'Virtual DOM'

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

리액트와 Virtual DOM이 언제나 제공할 수 있는 것은 바로 업데이트 처리 간결성이다. UI를 업데이트하는 과정에서 생기는 복잡함을 모두 해소하고, 더욱 쉽게 업데이트에 접근할 수 있다.

---

 

'기타 특징'

1. 리액트 = 프레임워크가 아닌 라이브러리 + 뷰만 신경쓰는 라이브러리
2. 리액트는 다른 웹 프레임웤나 라이브러리와 혼용할 수 있다. (ex. Backbone.js, AngularJS)