CRA vs Vite
Vite(비트)
좀 불확실
보일러 플레이트가 뭐지?
nextjs도 보일러플레이트다
vite도 보일러플레이트다
렌더링 vs 마운트
요약
렌더링: 계산
마운트: 하드디스크 관련 단어.
렌더링은 그리는 게 아니라 컴포넌트 코드를 읽는 것
리액트는 노드 js가, 그 안의 v8엔진이 리액트 코드를 해석한다. 그 해석하는 과정, 읽는 과정을 렌더링이라고 한다.
읽힌 순서 1->2->3->4 콜 스택에 쌓임 콜 스택은 최신이 제일 먼저 나옴 선입후출
마운트 순서는 1<-2<-3<-4
마운트는 컴포넌트를 dom에 반영하는 것
렌더 페이즈 vs 커밋 페이즈
렌더 페이즈: 콜 스택에 쌓는다.
커밋 페이즈: 스택에 쌓인 걸 차례대로 실행한다. 이 실행을 마운트라고 한다.
리액트 15까지 vs 16부터
요약
스택 리콘실리에이션이 달라짐
fiber 아키텍처: 섬유처럼 유연하게 UI 순서를 재조정하여 화면에 띄워지는 frame이 밀리지 않게 함
찾아볼 것
- 스택 리콘실리에이션
- 파이버 아키텍쳐의 한계
실습
스트릭트 모드
내부적으로 오류 없는지 점검함 <- 개발환경에서 두 번 렌더함 / 없이 개발해도 됨
useEffect
- 의존 배열로 빈 배열을 쓰면: 마운트 시점에 딱 한 번만 실행됨
