1. 리액트란?

1) 배경

• 자바스크립트의 영역 확장
• 웹 뿐만 아니라 서버, 모바일, 데스크톱 애플리케이션까지 개발
• 대규모 애플케이션 구조를 관리하기 프레임워크 등장

프레임워크

- 프레임워크들은 주로 MVC, MVVM 아키텍처 사용
👉 MVC : Model - View - Controller
👉 MVVM : Model - View - View - Controller
👉 Model은 데이터를 관리하는 영역
👉 View는 사용자에게 보이는 부분
👉 Controller는 Model 데이터를 조회, 수정하고 변경사항을 View에 반영

• 반영하는 과정에서 뷰를 변형
• 애플케이션 규모가 커질수록 변경할 규칙을 정하는 작업이 복잡해지고 성능도 떨어짐
• 리액트의 등장
  👉 페이스북 개발팀은 기존 뷰를 날려버리고 처음부터 새로 렌더링하는 방식에서 고안
  👉 이러한 방식은 CPU 점유율, 메모리 사용 증가, 리렌더링으로 끊김 현상의 문제가 있음
  👉 리액트는 위 방식으로 최대한 성능을 아끼고 편안한 UX를 제공하기 위해 개발

2) 리액트 이해하기

• 리액트는 자바스크립트 라이브러리로 UI를 만드는데 사용
• 다른 프레임워크와 달리 오직 View만 신경 쓰는 라이브러리
• 컴포넌트 : 리액트에서 특정 부분이 어떻게 생길지 정하는 선언체
• 컴포넌트와 템플릿 차이
  👉 템플릿은 HTML 태그 형식을 문자열로 반환
  👉 컴포넌트는 재사용 가능한 API들을 내장, 해당 컴포넌트의 생김새와 작동 방식을 정의
• 컴포넌트는 초기 렌더링과 리렌더링을 실행

초기 렌더링

• render함수로 컴포넌트가 어떻게 생겼는지 정의
• 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환
• 컴포넌트 내부에 다른 컴포넌트가 들어갈 수 있고 이는 재귀적으로 렌더링
• 최상위 컴포넌트 렌더링이 끝나면 HTML 마크업을 만들고 이를 DOM 요소 안에 주입
  

조화 과정

• 데이터를 업데이트했을 때 새로운 데이터를 가지고 render함수를 호출
• 이전 render함수가 만들었던 컴포넌트 정보와 현재 render함수가 만든 컴포넌트 정보를 비교
• 자바스크립트로 두 가지 뷰를 최소한의 연산으로 비교한 후 DOM 트리를 업데이트
  

2. 리액트 특징

1) DOM vs Virtual DOM

DOM

• DOM
  👉 Document Object Model 의 약어
  👉 객체로 문서 구조를 표현 (HTML, XML로 작성)
  👉 트리 형태로 특정 노드를 찾거나 수정, 제거, 원하는 곳에 삽입 가능
• DOM 에 직접 접근한 변화의 문제점
  👉 성능 이슈 발생 (느려짐)
  👉 변화가 일어나면 재연산, 리페인팅, 레이아웃 구성으로 시간을 허비

Virtual DOM

• DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화
• 실제 DOM의 가벼운 사본같은 개념
• 절차 순서
  👉 데이터를 업데이트하면 Virtual DOM에서 리렌더링
  👉 이전 내용과 현재 내용 비교
  👉 바뀐 부분만 실제 DOM에 적용
• 기타 특징
  👉 리액트는 오직 뷰(view)만 담당
  👉 프레임워크가 아닌 라이브러리
  👉 필요한 기능(라우팅, Ajax, 데이터 모델링 등)은 다른 (third-party)라이브러리(react-router, axios, redux 등)들을 활용