2장 note

[dogyeong]

• 브라우저에서 Empty Cache and Hard Reload 버튼
• 모달 컴포넌트의 효과적 구현 방식
• 테이블 컴포넌트의 효과적 구현 방식
• 컴포넌트 preloading 활용 예시 (+)
• 이미지/폰트 파일 -> public 폴더? src/assets 폴더?
• 이미지 파일 네이밍
• React 18 key prop 강제 리렌더링 (경험 공유)
• JS requestAnimationFrame
• 레이아웃 (flow)
• reflow와 repaint
  • React에서 useEffect와 useLayoutEffect 훅, 활용 예시, (경험 공유)
• visibility hidden 관련
  • Vue에서 v-show
  • display none와의 구분 및 활용
  • reflow/repaint
• useEffect 여러 개 있을 때의 작동 순서는?
• mouseenter vs. mouseover
• mouseleave vs. mouseout
• React의 Synthetic Event
• image preloading, component lazy loading (실무 활용 경험 공유)

[dogyeong]

Vue에서 v-if vs v-show

Generally speaking, v-if has higher toggle costs while v-show has higher initial render costs. So prefer v-show if you need to toggle something very often, and prefer v-if if the condition is unlikely to change at runtime.

https://vuejs.org/guide/essentials/conditional.html#v-if-vs-v-show

[dogyeong]

solidjs에서 조건부 렌더링

https://www.solidjs.com/tutorial/flow_show

<Show
  when={loggedIn()}
  fallback={<button onClick={toggle}>Log in</button>}
>
  <button onClick={toggle}>Log out</button>
</Show>