React ? (가상돔, SPA, npm vs npx, 웹팩, JSX)

* React
- 컴포넌트 기반의 라이브러리
- 가상돔을 사용함 (렌더링 이전의 가상돔과 렌더링 이후의 가상돔을 가지고 있음)
- npx create-react-app <폴더이름>


* 웹 페이지 빌드 과정

1. DOM과 CSSOM 생성
HTML 문서가 로드되면, 브라우저는 이 문서를 읽어서 DOM(Document Object Model) 트리를 만듦
DOM은 웹 페이지의 구조화된 표현으로, 메모리에 웹 페이지 문서 구조를 트리구조로 표현하여 웹 브라우저가 html 페이지를 인식하게 해줌. 프로그래밍 언어가 문서의 구조, 스타일, 내용 등을 조작할 수 있게 해줌
자바스크립트가 이용할 수 있게 브라우저가 트리구조로 만든 객체 모델 의미
동시에 브라우저는 외부 CSS 파일과 <style> 태그의 CSS를 파싱하여 웹 페이지의 스타일 정보를 담고 있는 CSSOM(CSS Object Model) 트리를 생성함
(렌더 엔진이 문서를 읽어들여서 파싱후, 어떤 내용을 페이지에서 렌더링 할지 결정)

2. 렌더트리 생성
브라우저가 DOM과 CSSOM 결합하여 화면에 표시되는 모든 콘텐츠와 스타일 정보를 모두 포함하는 최종 렌더링 트리 출력

3. 레이아웃
브라우저가 페이지에 표시되는 각 요소의 크기와 위치 계산
요소들의 크기와 위치 정보가 '박스 모델'에 따라 결정

4. 페인트
레이아웃 단계에서 계산된 크기와 위치 정보를 사용하여 화면에 요소를 실제로 그림



* Real DOM vs Virtual DOM

Real DOM : ex.한개만 업데이트 해도 전체 렌더링
Virtual DOM :실제 돔을 메모리에 복사해준 것, 실제 돔과 같은 모양이지만 직접적으로 브라우저 문서에 접근은 불가함 (수정 불가) => ex. 바뀐 리스트만 dom에 업데이트



* 리액트의 가상돔
실제 돔과 같은 내용을 담고 있고, 자바스크립트 객체 형태로 메모리에 저장 됨
렌더링 이전의 가상돔과 렌더링 이후의 가상돔을 가지고 있음 (2개)
바뀐 부분만 실제 돔에 적용해주고, 변경 전과 후를 비교하는 고정(바뀐 부분을 찾는 것)은 diffing이라고 부름
diffing을 통해서 변경된 부분을 파악후, 리액트는 batch update를 수행하여 실제 돔에 한번에 적용하는데 이 것을 reconciliation(재조정)이라고 부름


* npm vs npx
로컬에 설치해서 사용하고 싶을때 : npm install
패키지를 가져와 실행만 할 때, 최신버전이 필요할 때, 생성할때만 필요 : npx create-react-app



* 웹팩
오픈소스 자바스크립트 모듈 번들러로, 여러개로 나뉘어진 파일을 하나의 자바스크립트 코드로 압축하고 최적화 해주는 라이브러리
로딩에 대한 네트워크 비용을 줄여주고, 모듈단위 개발이 가능하여 가독성과 유지보수에 좋음
src/ 이 부분에 있는 부분만 번들링해줌 -> npm run build 하면 웹팩이 작동함



* Single Page Application(SPA)
웹사이트의 전체페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현
history API 이용



* JSX
자바스크립트의 확장 문법
UI를 나타낼때 자바스크립트와 HTML 구조(마크업)를 같이 사용할 수 있기 때문에 기본 UI에 변하는 것들이나 이벤트들이 처리되는 부분을 더욱 쉽게 구현 가능
리액트에서 의무는 아니지만 대부분이 사용함(createElement Api를 모든 요소에 사용하면 너무 복잡해짐, 사실상 불가능-> jsx사용하면 babel이 바꿔주므로 jsx를 사용)


* 클래스 형식
export default class App estends Component{
 render(){
  return(
   ...
  )
 }
}