[이상조] 챕터 12: 리액트 디자인 패턴

챕터_12/이상조.md

@@ -0,0 +1,52 @@
+## hoc & render props
+
+hoc는 개인적으로 그리 좋아하지 않는 패턴임.  
+이유는 외부에서 바로 알아볼 수 없기 때문.  
+Suspensive를 안쓰는 이유도 이것.
+
+```jsx
+<div>
+  <Something /> // 이거 왜 안보여?
+</div>
+
+// Something.tsx를 들어가서 한참 살펴보니...
+// WithAuth(Something) 였다거나...
+
+<div>
+  <Something /> // 여기 서스펜스가 없는데 로딩 fallback이 왜 보이지? 혹은 여기 suspensive 적용했었나?
+</div>
+```
+
+이게 소수정예로 뉴럴링크 공유하면서 개발하면 괜찮을 것 같은데, 조직 구조상 협업이 좀 어렵다? 그럼 곤란할 것 같음.  
+그리고 리액트에서 이제 hoc대신 render props패턴을 사용하도록 권장한다는 얘기가 있었는데 못찾겠네요.  
+[누군가 hoc와 render props 패턴에 대해 정리해둔 글](https://gist.github.com/heygrady/f9bf3b6dd93fe3d87ba87430fd3c20d5)
+
+## 리액트 Hooks 패턴
+
+이것도 옛날에는 어떤 패턴이라고 불렀겠구나 싶었음.  
+지금이야 그냥 당연히 hook으로 개발하지만, 클래스 > 함수로 넘어가면서 hooks도 패턴 중 하나로 취급됐었던 게 아닐까.
+
+## 코드 스플리팅
+
+레이지 로딩은 잘 사용하면 효율적이지만, 번들 줄이기에만 몰두해서 오남용하면 안된다.  
+[누군가 Suspense에 대해 정리해둔 글](https://blog.sjoleee.info/posts/suspense-1)  
+
+가끔 모든 페이지에 lazy 걸어두고 번들 최적화했다는 내용을 보면 고민됨.  
+처음 좀 느려도 미리 다 받아놔서 빠르게 이동하는게 react spa의 장점인데, 모든 페이지 진입마다 스피너 봐야하면 그건 장점을 계속 갖고있다고 봐야할까?  
+좀 빠른 mpa랑 유저 입장에서 뭐가 다르지...?
+
+## PRPL 패턴
+
+요즘 리액트와 넥스트가 대부분 해주는 내용이다.  
+
+## 로딩 우선순위
+
+회사에서 폴리필 스크립트를 우선 로딩해야하는데, script 태그 대신 import로 로드하고 있음.  
+import로 로드하고, 해당 모듈을 react createRoot 이전에 실행되도록...  
+이유는 잘 모르겠는데, script태그로 가져온 의존성은 번들러가 관리할 수 없는 것 같다.  
+
+## 리스트 가상화
+
+이건 좀 적용해보고 싶은데, 기회가 잘 없다.  
+content-visibility는 모달이나 바텀싯 같은 컴포넌트에 적용하면 좀 도움이 되지 않을까?  
+한편으로는 노드가 많지도 않고 오버레이 위에 복잡한 ui를 만들지 않아서 효과가 얼마나 있을지는 모르겠다. 오히려 페인팅 지연으로 유저 경험을 저해할 수 있지 않을까?