오늘의 나는 무엇을 배웠을까?
Next.js App Router - Data Fetching(2)
React, TypeScript 특강
이정환 Winterlood님
리액트 톺아보기
- 리액트를 왜 만들었을까?
가장 중요한 것은 화면 업데이트가 간단하기 때문에!
웹에서의 업데이트는 곧 상호작용 -> 사용자의 행동에 웹이 실시간 반응하는 것
리액트는 시대적 배경을 잘 반영한 기술
- 리액트의 업데이트는 왜 편리한걸까?
선언형 프로그래밍, 컴포넌트 기반의 UI 표현과
Virtual DOM(가상 돔)
DOM을 똑같이 copy한 JS 객체
동시에 발생하는 다양한 일들을 자동으로 모아 처리 -> 버퍼 역할
리액트의 VDOM은 자동으로 버퍼를 처리
업데이트가 발생할 시 VDOM에 먼저 반영, 이후 한꺼번에 처리
일종의 batching 처리를 해준다
대부분의 상황에서 VDOM을 사용하는 방식이 충분히 빠르다
하지만, 항상 그렇지는 않다…
왜? 요소의 깊이가 깊어질 수록 새로운 VDOM을 생성하고 diffing 한 뒤 업데이트 하는 시간이 오래 걸리기 때문에
- 리액트의 Reconcilliation 과정은 어떻게 진행될까?
두개의 VDOM을 비교하고 차이점을 분석해 업데이트 하는 과정
VDOM은 사실 리액트 컴포넌트가 반환하는 값들로 이루어진다.
-> 리액트 함수 컴포넌트는 React Element라는 객체를 반환하는 함수
-> 그리고 그 React Element는 VDOM의 구성 요소
-> 즉 VDOM은 React 컴포넌트들의 반환값들이 모인 tree
Diffing Algorithm
휴리스틱을 채택
- 두 트리를 레벨 별로 비교(Root 노드부터 차례로 비교)
- Element의 타입이 변경 되었을 경우는 : 하위 트리를 재구축 달라진 노드 아래의 서브트리를 아예 파괴 후 재생성
- Element의 Props만 달라졌을 경우는 : 변경된 Props만 갱신
- Component의 Props만 달려졌을 경우는 : 변경된 Props만 갱신 이 때 컴포넌트 내부의 state는 유지된다.
- 리스트를 렌더링 할 때 key가 없을 경우 :
- 리스트 맨 마지막에 요소가 추가되면 순서대로 비교하여 마지막에만 추가
- 리스트 맨 앞에 요소가 추가되면 순서대로 비교하기 때문에 전체 요소가 다 렌더링
- 리스트를 렌더링 할 때 key가 있는 경우 :
- 항상 key 값을 기준으로 비교
- 리액트를 사용할 때 어떤 점을 유의해야 할까?
불필요한 Element Type 업데이트를 피하자 (이 때 Element Type는 컴포넌트의 이름이 될 것임)
key에 index를 사용하지 말자 : 리스트에 업데이트가 발생할 경우 예상치 못한 동작을 발생시킬 수 있음
TypeScript
(내용 추가 예정)
—save-dev 옵션을 사용하는 이유
.d.ts 확장자의 d = declaration
moduleResolution 옵션
TS의 모듈 해석 방식을 결정하는 옵션
Classic 방식 : 절대 경로일 때 프로젝트의 루트에서 모듈을 찾음
Node 방식 : 절대 경로일 때 node_modules 폴더 아래에서 모듈을 찾음
어떤 변수든 any type이 되서는 안된다 : 확실한 type 정의가 필요하다.
내일의 나는 무엇을 해야할까?
오늘 특강이 생각보다 길어서 어제 세웠던 계획을 잘 지키지 못했다. 하루에 할 수 있는 공부량을 잘 고려해서 계획을 세워야겠다.
- Next.js Docs - Fetching : Caching, Revalidating
- TypeScript 강의 수강 - 2-2 ~ 2-5
