[React] 리액트 개념 정리 #1

1장

리액트
web UI를 작성하기 위한 자바스크립트 라이브러리
MVC(Model, View, Controller) 중에서 V.. 컴포넌트 수준에서 상태 관리 기능을 제공한다.
 
JSX
자바스크립트 확장 문법
 
MPA
멀티 페이지 어플리케이션
화면 전환 시 새로운 HTML 페이지로 이동한다.
사용자 인터렉션에 의한 화면 변화는 HTTP 통신으로 서버에서 데이터를 받아 JS 코드로 뿌린다.
 
https://lite.tiktok.com/t/ZSHEaPsFVbWh5-JC1gk/

TikTok Lite를 다운로드하고 풍성한 리워드를 받아가세요!

SPA
단일 페이지 어플리케이션
하나의 페이지가 하나의 애플리케이션임
HTML 페이지 하나로 구성되지만 여러 화면으로 표현이 가능하다.
단점
1. 효과적인 상태 관리 필요
상태란?
한 페이지에 여러 화면 기능을 구현해야해서 화면마다 처리할 데이터가 많음. 이 데이터들이 상태임
컴포넌트들이 보유하고 관리하는 데이터
2. 느린 DOM으로 성능 저하
web 브라우저의 DOM을 자주 갱신해서 리소스 사용이 많아짐
3. SPA 비용 문제 
이건 가상 DOM 사용으로 해결할 수 있음.
 
DOM이 뭐지
DOM은 브라우저가 실제 렌더링해서 보여주는 구조임
웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게 만든 트리 구조의 객체 모델임.
트리 구조의 객체: 객체들이 부모-자식 형태인 것
 
가상 DOM
쉽게 말하면 브라우저 메모리상 DOM의 복사본
브라우저 DOM을 추상화한 브라우저 메모리 상의 자바스크립트 객체
 
브라우저 DOM에 바로 렌더링 하지 않고 가상 DOM을 사용하는 이유는?
가상 DOM의 사용 목적이 렌더링 성능 최적화임
브라우저 DOM을 직접 다루는 것은 느리고, 구조가 복잡함. (변경 시 UI를 다시 계산하고 그려야 하기 때문)
그래서 최소한의 변경만 실제 브라우저에 반영하려고 가상 DOM을 씀.
 
리액트 컴포넌트는 가상 DOM으로 렌더링을 수행하고, UI의 상태가 변경될 때마다
이전 버전과 새로운 버전을 비교해서 차이나는 부분만 브라우저 DOM에 업데이트함.
 
Node.js
자바스크립트 실행 엔진으로, 브라우저가 아닌 환경에서도 자바스크립트 코드 실행이 가능함.
 

2장

ES6
ECMA 스크립트의 6번째 버전
ECMA 스크립트는 ECMA-262에 정의된 표준화된 스크립트 프로그래밍 언어이다.
 
타입스크립트
ES6에 정적 데이터 형식 기능이 추가된 것. 자바스크립트의 확장 버전이다.
 
let은 블록 범위를 가짐, 변수 재선언불가, 재할당 가능
const는 블록 범위를 가짐, 변수 재선언 불가, 재할당 불가
 
화살표 함수 const fun = () => { ... }
function 키워드 대신 => 를 사용해서 간결하게 함수를 정의함
함수 정의 영역의 this를 그대로 전달받을 수 있음.
this: 현재 실행 중인 코드가 속한 주체(객체)를 가리키는 키워드
 
Promise
비동기 작업의 결과를 약속하는 객체
나중에 완료될지도 모르는 작업을 다루기 위한 ES6의 표준 문법
ES6가 프로미스 객체를 지원해 비동기 처리를 좀 더 깔끔하게 수행 가능함
비동기적 작업을 순차적으로 실행 가능
then() 체이닝으로 순차 실행 (비동기 작업이 성공했을 때 실행)
 
정적(static): 고정되어 있음. 실행 중 바뀌지 않음. 프로그램 실행 전 이미 타입이나 속성이 고정되어 있는 것
- 정적 타입: 변수의 타입이 미리 정해져 있고 바뀌지 않음
- 정적 메서드: 인스턴스가 아니라 클래스 자체에 속한 메서드
 
타입스크립트의 정적 타입
타입 종류
1. number: 숫자
2. string: 문자열
3. boolean: 불리언
4. any: 모든 타입.. 형식 검사 수행 안 함
5. array: 배열
6. null: 객체 없음
7. undefined: 할당 값 없음
8. void: 결과 리턴 안 함
9. union: 여러 타입의 값을 허용할 때 OR 개념 지원
9-1. 인터넥션 타입: AND 개념 지원
10. 사용자 정의 타입
11. enum: 열거형