[React] useSWR 맛보기

 

캐시로부터 데이터를 받고, 데이터 fetch 요청을 하고, 최종적으로 최신 데이터를 가져오는 전략

 

 

[SWR 정의]

SWR은 State While Revalidate 의 약자로 서버에서 데이터를 가지고올 때 사용되는 리엑트 hook 이에요.

불러온 데이터를 캐싱하여 여러 컴포넌트에서 편하게 사용할 수 있는 장점이 있죠!

 

 

useSWR hook은 5가지의 값을 반환해요

• data              :      비동기로 가지고 온 데이터예요
• error             :      데이터 호출 시 에러 유무를 Boolean 값으로 알려줘요. 해당 값으로 화면에서 에러처리 가능해요
• isLoading     :      데이터 호출 상태를 알려줘요. 해당 값을 가지고 화면에서 로딩상태를 관리할 수 있어요
• isValidating  :      요청이나 갱신 로딩의 여부를 표시해요
• mutate          :      값을 업데이트하기 위해 호출하는 함수라고 생각하면 돼요, 호출하고 나서 변경값이 있다면 'data' 값이 바뀌어요 

import useSWR from 'swr'
 
function Profile () {
  const { data, error, isLoading } = useSWR('/api/user/123', fetcher)
 
  if (error) return <div>failed to load</div>
  if (isLoading) return <div>loading...</div>
 
  // 데이터 렌더링
  return <div>hello {data.name}!</div>
}

 

이 값들을 이용해서 위와 같이 작업할 수 있죠, 위의 예시는 SWR 홈페이지에 나와있는 예시입니다!

 

useSWR hook은 3가지의 값을 파라미터로 가져요

• key               :      해당 요청을 위한 고유한 값이에요.
• fetcher         :      데이터를 가져오기 위한 함수를 입력받아요.
• options        :      SWR hook 관련된 옵션을 추가할 수 있어요. 해당 글에서는 깊이 다루지 않아요~!

 

 

[SWR 이점]

데이터를 호출에 useEffect 나 useState를 사용한다고 해봅시다. 만약 해당 값들을 여러 자식들에게 넘겨줘야 한다면

일일이 다 추가해주어야 합니다. 넘겨주어야 할 페이지들이 많아질수록 더욱 힘들어지겠죠.

function Page () {
  const [user, setUser] = useState(null)
 
  // 데이터 호출
  useEffect(() => {
    fetch('/api/user')
      .then(res => res.json())
      .then(data => setUser(data))
  }, [])
 
  // 전역 로딩 상태
  if (!user) return <Spinner/>
 
  // 자식들에게 각각 전달 
  return 
  <div>
    <Navbar user={user} />
    <Content user={user} />
  </div>
}

 

 

반면 useSWR을 사용한다면 한 줄로 모든 데이터를 받을 수 있습니다.

// 자식 컴포넌트
const Chile1 = () => {
     const { data, error, isLoading } = useSWR('/api/user/123', fetcher)
     return(
     	{isLoading 
     		? <div>로딩중..</div> 
        	: <div>{data}</div>
      	}
     )
}

const { data, error, isLoading } = useSWR('/api/user/123', fetcher)

한 줄이면 어느 컴포넌트에서도 같은 값을 가지고 화면을 구성할 수 있습니다.

 

 

 

[SWR 커스텀]

useSWR을 이용해서 커스텀해서 사용 할 수도 있어요!

function useExample(id) {
	const { data, mutate, error } = useSWR(id, () => fetchData(id));
	return {
		data: data,
		mutate,
		isLoading: !error && !data,
		isError: error,
	};
}

 

이렇게 커스텀 하게되면 data의 값, isLoading 이나 error 값을 따로 정의내려서 사용할 수 있어요!

좀더 입맛에 맞춰서 사용할 수 있는 것이죠

 

 

 

SWR 맛보기였습니다.

SWR 사용 시 다른 컴포넌트들에 값을 보내줄 필요없이

편하게 사용할 수 있고, 그런 부분의 작업이 필요없으니

자연스레 작업양도 줄일 수 있게되죠

기회가 되면 좀더 깊이 파보는 것도 재밌을 것 같아요. 

 

 

 

참조한 SWR 공식문서 

https://swr.vercel.app/ko/docs/getting-started