swr이란?
React에서 데이터를 가져오기 위한 React Hooks ( Node.js 패키지 )
React Hook이란?
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>
}
반응형