TIL-220511

SWR

• React hooks for remote data fetching
• Next.js 개발팀에서 개발한, GET request에 특화된 라이브러리이다.
• 내장된 캐시를 통해 요청 중복을 제거하고, 캐시 이후에는 자동 revalidation이 일어나 데이터 일관성을 유지한다.
• 포커싱에 따른 데이터 갱신, 주기적인 호출, local mutation, 패이지네이션 이후 스크롤 위치 기억 등의 기능이 있다.
• 기본 예제

import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

• 여기에서 swr 개발 팀이 직접 작성한 example을 볼 수 있다.

UI 용어

• 프론트엔드 개발자라면 반드시 알아두어야 할 32가지의 UI 요소 (번역)

Design Patterns

• 5 Advanced React Patterns