React란?

1. React 등장 배경

1-1. 기존의 JS Framework

• 이전의 JS는 웹 브라우저에서 간단한 연산을 하거나 시각적인 효과를 주는 단순 스크립트 언어에 불과
• 현재의 JS는 웹 어플리케이션 뿐만 아니라 서버사이드, 모바일, 데스크탑 어플리케이션에서도 활약
• 순수 JS만으로 대규모 어플리케이션의 프론트엔드 사이드를 관리하려면 골치아픔
• 수많은 Framework가 생겨남; 주로 MVC, MVVM, MVW 등의 구조를 가지며 공통적으로 Model과 View가 존재(Model은 데이터 관리 영역, View는 사용자에게 보여지는 부분)

1-2. React

• 페이스북 개발팀에서 복잡성을 줄이기 위해 '데이터가 변할 때마다 기존의 뷰를 날리고 새로 렌더링하자'는 아이디어로 시작
• 어플리케이션 구조가 간단해지고 작성해야할 코드의 양이 줄어듬 / CPU 점유율이 크게 증가하고 데이터 변할 때마다 새로운 렌더링이 발생해 끊김 현상 동반
• 최대한 성능을 아끼고 편안한 사용자 경험을 제공하며 구현해보자
  +) React 자체는 framework의 기준인 라우팅, 상태관리 기본 제공을 충족하지 못해 라이브러리이지만, React의 생태계는 framework이다.

2. React의 특징

• 선언적(Declarative)
  : 대화형 UI를 작성하기에 유리, 데이터가 변경되었을 때 효율적으로 렌더링 수행
• 컴포넌트 기반(Component-based)
  : 캡슐화된 컴포넌트가 스스로 상태를 관리, 복잡한 UI도 효과적으로 구성 가능
• 한 번 배워서 어디에서나 사용(Learn Once, Write Anywhere)
  : 기존 소스를 다시 작성하지 않고 새 기능을 개발할 수 있음, Node 서버에서 렌더링 할 수도 있고 온라인 웹에서도 사용 가능, React Native로 모바일 앱 개발 가능

3. React 작동 원리

3-1. DOM(Document Object Model)

• HTML, XML 문서의 프로그래밍 interface
• 문서 구조를 트리 형태의 객체로 표현해, 그저 텍스트 파일이던 문서에 프로그래밍 언어가 접근할 수 있도록 함
• DOM은 동적 UI에 최적화되어있지 않음 -> 작업의 결과물을 동일하게 유지하되 변경되는 DOM을 최소한으로 만들기 위한 방법 필요

3-2. Virtual DOM

• 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 JS 객체를 구성하여 사용
• ⭐ 즉 동적으로 데이터가 변화했을 때 직접적으로 DOM을 조작하지 않고 DOM의 사본이라고 할 수 있는 새로운 Virtual DOM을 생성해 이전의 것과 비교해 변경된 부분의 DOM만을 변경 -> '조화 과정(reconciliation)'

+) 3-3. 단방향 데이터 흐름(Flux)

4. React 장/단점

4-1. 장점

• CSR(Client Side Rendering), SSR(Server Side Rendering) 둘 다 지원
• 프론트엔드 사이드에서도 객체 지향적으로 코드 구현 가능
• React 공식 문서 가이드와 방대한 커뮤니티, 자료를 통해 학습이 쉬움
• Controller, directive, template, model, view 처럼 로직을 분리하지 않고, Component 하나로 관리 (이게 view 역할을 담당)
• 성능이 뛰어난 가비지 컬랙터, 메모리 관리 기능 지원
• UI 수정, 재사용성, 코드 가독성 향상
• 다른 framework나 library와 병행하여 사용 가능

4-2. 단점

• IE8 이하 버전 지원하지 않음
• view 이외 기능은 직접 구현하거나 library 사용해야하므로 JS 배경지식 필수
• 데이터 모델링, 라우팅, Ajax 등의 기능 지원 안됨
• 💥 로딩시간 길다(치명적!)
• 웹의 궁극적 지향점과 동떨어짐
  • 웹의 핵심: 모든 것을 streaming하며, 페이지들은 HTML 태그들을 내포하고 가벼운 response만 브라우징
  • 리액트: 사이트에 필요한 JS를 처음에는 공백페이지만 띄우며 다운로드하고, 한 번 다운로드 한 이후에는 다시 다운로드 하지 않아도 됨; 처음 보이는 것이 없다(streaming과의 차이)

참고자료
https://buyandpray.tistory.com/79
https://www.huskyhoochu.com/flux-architecture/
https://velog.io/@jeromecheon/React%EB%9E%80-%ED%8A%B9%EC%A7%95%EA%B3%BC-%EC%9E%A5%EB%8B%A8%EC%A0%90-%ED%8C%8C%ED%97%A4%EC%B9%98%EA%B8%B0