[ TIL ] 2022-05-12

React

• router 에서 path='favorite' 으로 명시하더라도, useLocation 으로 불러올 땐 '/favorite' 이라 적어줘야 한다

// 라우터 쓸 때
<Routes>
  <Route path='/' element={<Search />} />
  <Route path='favorite' element={<Favorite />} />
</Routes>

// useLocation
import { useLocation } from 'react-router-dom'

const inFavoritesPage = location.pathname === '/favorite'

• useSuspense
  아주 간단하게 로딩창 구현!
  공식 문서

---

Javascript

👍 Intersection Observer

• 스크롤 이벤트는 보다 정확한 높이값을 알기 위해 offsetTop 을 사용하는데, 이는 이벤트가 발생할 때 마다 layout 을 다시 하게 되는 reflow 를 발생시킨다. 이는 브라우저에 상당한 부담이 되며, 화면 버벅임도 낳을 수 있다.

• 때문에 스크롤 이벤트를 제어하기 위한 방법으로 debounce, throttle 기법을 사용할 수 있는데,
  Intersection Observer 는 debounce나 throttle를 사용하지 않고도 브라우저에 부담을 가하지 않고 무한 스크롤을 간편하게 구현 할 수 있는 API 이다 (IE 는 지원하지 않는다)

  참고 - 디바운싱과 스로틀링

  • 디바운싱은 연이어 이벤트가 발생할 때(지속 시간에 상관하지 않고) 맨 마지막에 발생한 이벤트만 호출하는 것
  • 스로틀링은 마지막으로 발생한 이벤트 이후 특정 시간 동안 이벤트가 발생하지 않도록 하는 것

• 사용할 때

  • 스크롤 이미지를 Lazy loading 할 때
  • 무한 스크롤을 구현할 때
  • 사용자가 보는 결과에 따라 애니매이션을 구현할 때

공식 문서 - Intersection Observer
참고 - Intersection Observer란 ?

---

API 에러처리

• props가 명시된 타입과 다르게 올 수 있음을 알아야 한다
• 이미지 검색 결과를 받아올 경우, 올바른 url 이 오지 않는 경우, url 자체가 없는 경우 등을 고려해야 한다

  예측할 수 있는 에러는 모두 예측하자!

---

더 알아볼 것

• Layout, template, outlet