[Node.js] swr이란? / 사용법

swr이란?

React에서 데이터를 가져오기 위한 React Hooks ( Node.js 패키지 )

 

React Hook이란?

[React] React Hooks란? / 사용법 ( useState, useEffect 등등.. )

 

swr의 필요성

swr을 사용하면 구성 요소가 지속적이고, 자동으로 데이터 업데이트 스트림을 주고 받는데,
이는 빠르고, 반응적인 UI를 만들 수 있게 해줍니다!



swr 설치하기

npm i swr

 

swr 사용하기

// components/Profile.js - react 프로젝트 내부 컴포넌트파일
import useSWR from 'swr'

function Profile() {
  // useSWR 사용해서 api 데이터 불러오기
  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>
}