diff --git "a/\354\261\225\355\204\260_12/\354\232\260\354\260\275\354\231\204.md" "b/\354\261\225\355\204\260_12/\354\232\260\354\260\275\354\231\204.md" new file mode 100644 index 0000000..8de262b --- /dev/null +++ "b/\354\261\225\355\204\260_12/\354\232\260\354\260\275\354\231\204.md" @@ -0,0 +1,135 @@ +# 12. 리액트 디자인 패턴 + + + +## 12.2 고차 컴포넌트 + +고차컴포넌트 = wrapper 컴포넌트 + +개인적인 취향일 수 있지만, 고차 컴포넌트를 여러 개 쓰면 코드의 흐름과 디버깅이 복잡해져 즐겨 사용하지 않는다. 여러 고차 컴포넌트를 섞으면 더 흐름을 파악하기 어려워진다. + +Wrapper hell 패턴을 유발할 수 있따. + + + +## 12.3 렌더링 Props 패턴 + +prop이 복잡해지고, TypeScript 타입 복잡성과 추론 호환성이 좋지 않아 안티 패턴 같다. + +```jsx + <h1>I am a render prop!</h1>} /> +``` + + + + + +### 12.3.2 컴포넌트의 자식으로 함수 전달하기 + +render로 children으로 전달하는 것보다 더 별로다 + +JSX 내부에 복잡한 함수 로직패턴이 있어야 할까? 가독성은 선호의 영역이라지만 관심사 분리도, 응집도가 떨어진다. + + + + + +### 12.10.2 Preload + async 기법 + +async대신 defer도 고려하자. defer의 경우 async보다 더 빠르게 화면을 보여줄 수 있다. + +```html +<script src="some.js" defer></script> +``` + + + + + +### 12.10.3 크롬 95+ 버전에서의 preload + +preload가 리소스의 우선순위 큐를 무시하고 먼저 로드되는 "queue jumping" 현상이 있었지만, Chrome 95+ 버전부터는 더 이상 발생하지 않습니다. 현재는 `as` 속성에 따른 정상적인 우선순위를 따른다. + + + +브라우저는 리소스 우선순위 체계를 가진다고 한다. + +결국, 이 우선순위에 따라 순서를 배치하는 게 좋은 pratice + +1. Highest + +- 메인 문서 (HTML), CSS (@import 포함) + +2. High + +- 동기 자바스크립트 (`<script>`), 웹폰트, 뷰포트 내의 이미지 + +3. Medium + +- 비동기 CSS +- 일부 preload 리소스 + +4. Low + +- 비동기 자바스크립트 (`async`, `defer`) +- 이미지 preload. 뷰포트 밖의 이미지. prefetch 리소스 + +5. Lowest + +- favicon, lazy loading 이미지 + + + +예를 들어, font preload는 css 보다 뒤에 배치하자 + +```html + +<head> + <!-- Critical CSS first --> + <link rel="stylesheet" href="/styles.css"> + + <!-- Other resources --> + + <!-- Fonts towards end of head --> + <link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin> +</head> +``` + + + + + +## 12.11 리스트 가상화 + +사용자가 스크롤하는 영역만 동적으로 렌더링하는 최적화 기술 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/\354\261\225\355\204\260_13/\354\232\260\354\260\275\354\231\204.md" "b/\354\261\225\355\204\260_13/\354\232\260\354\260\275\354\231\204.md" new file mode 100644 index 0000000..9932929 --- /dev/null +++ "b/\354\261\225\355\204\260_13/\354\232\260\354\260\275\354\231\204.md" @@ -0,0 +1,14 @@ +# 13. 렌더링 패턴 + + + + + +# 13.2~13.3 CSR과 SSR + +SSR의 엄청난 팬은 아니지만, waterfall을 방지하여 렌더링을 빠르게 할 수 있다. + +relay를 쓰면서 csr로도 충분히 좋은 성능을 실제로 경험할 수 있었고, 요즘은 페이지 loader에 대한 접근도 활발히 이루어지고 있다. + +remix, tanstack router 등 +