Skeleton

[ijieun0123]

😇   결과

2022-10-26.9.23.51.mov

🔗   참고 링크

Skeleton-Loading
메모리누수 에러 해결
material-UI Skeleton

📝   메모

* skeleton 은 디렉토리를 따로 만들었다.
* 항상 로딩중에는 스켈레톤을 보여주고, 로딩이 끝나면 응답받은 data 를 보여주므로 중복코드가 많아 useSkeleton 훅을 따로 만듦
* data 를 온전히 받아오기 전에 다른 api 를 요청하면 메모리 누수 에러가 일어나므로, unmount 일때 api 요청을 그만두도록 설정함

🔵   useSkeleton.js

1. useSkeleton.js 커스텀 훅 생성

const useSkeleton = getData => {
  const [loading, setLoading] = useState(true)
  const [isSubscribed, setIsSubscribed] = useState(true)

  useEffect(() => {
    if (!loading) return

    if (isSubscribed)
      setTimeout(() => { // 스켈레톤 화면을 적당히 보여주기 위해 setTimeout 사용
        setLoading(false)
      }, 1500)
  }, [loading])

  useEffect(() => {
    getData()
    return () => setIsSubscribed(false) // unmount 일 때, api 요청 중지
  }, [])

  return {loading}
}

2. useSkeleton 훅 꺼내쓰기 ( ex video.js )

const Video = ({id}) => {
  const [videos, setVideos] = useState([])

  const getVideos = () => {
    api
      .getVideos(id)
      .then(res => {
        console.log(res.data)
        const {results} = res.data
        setVideos(results)
      })
      .catch(e => {
        console.log(e)
      })
  }

  const {loading} = useSkeleton(getVideos) // useSkeleton 훅

  return (
    <Grid container spacing={1}>
      {videos.map(video => (
        <Grid key={video.id} item xs={12} sm={6} lg={4}>
          <Box sx={BoxStyle}>
            {loading ? ( // loading 중 => Skeleton 띄우기
              <Skeleton
                style={contentStyle}
                animation="wave"
                variant="rectangular"
              />
            ) : ( // loading 완료 => 데이터 화면 띄우기
              <iframe 
                style={contentStyle}
                src={`https://www.youtube.com/embed/${video.key}?autoplay=1`}
              ></iframe>
            )}
          </Box>
        </Grid>
      ))}
    </Grid>
  )
}