[Week5] 임지성 - 이미지 갤러리 최적화

[jstar000]

📚 이번 주 학습 내용

• 읽은 범위: 4장 이미지 갤러리 최적화

---

📝 정리한 내용

• 마크다운 파일 이름: 이미지갤러리.md
• 주요 개념 정리
• 예시 코드 및 설명
• 기타 참고자료 (있는 경우)

---

💡 핵심 요약

• 레이아웃 이동 피하기
  • 이미지 등의 사이즈를 미리 지정해두고, 레이아웃 이동을 방지해야 함
  • aspect-ratio나 padding(%단위) 등의 방법 사용
• 이미지 지연 로딩
  • Intersection Observer나 react-lazyload 라이브러리 사용해서 이미지 지연로딩 가능
• 리액트 렌더링 최적화
  • 불필요한 리렌더링이 발생하지 않도록 상태 관리를 적절히 해야함
• 병목 코드 최적화
  • 함수 Memoization -> 한 번 실행된 함수에 대해 반환값을 기억하고, 같은 조건으로 실행되면 이전에 기억해둔 값을 반환할 수 있음

---

🤔 느낀 점 or 토의하고 싶은 부분

• (인상 깊었던 내용, 이해가 잘 안 됐던 부분, 공유하고 싶은 인사이트 등)
• Intersection Observer 사용이 생각보다 까다로웠는데, react-lazyload는 사용법이 꽤 간단한 것 같아 지연로딩 등에 적용해보려고 합니다.

---

✅ 기타

• (예: 다음 주 읽을 분량, 참고할 만한 리소스 링크, 이슈 등)