[React] 데이터 연결한 모달 버벅거림 해결(부제 : framer motion으로 애니메이션 주었을 때 해결방안)

작업 가이드 작성하다보니 티스토리 글들이 너무 밀려버려서 슬프다

에러 짱 많이 났는데,,,ㅎㅎ 오늘부터 하나씩 써야지....

 

포트폴리오 제작이 얼추 끝났기 때문에 최종확인을 하던 도중 아무리 봐도 내가 보기엔 고칠 점이 안보이는 것이었다 자신감 넘치는 병이 생겼다 (잠못자서 그런 것 같음)

 

그래서 주변인들을 상대로 가볍게 QA를 진행해보도록 했다 거창하게 말하면 UI 테스트!

1. 레이아웃 깨짐 확인

2. 디자인에서 눈에 튀는 것이 있는지

3. 사이트 처음 접속 시 이미지 로딩 속도가 어떤지

4. 눌러보고 싶은거 다 눌러보고 기능 이상이 있는 것이 있는지

 

이렇게 4가지만 확인해달라고 했다

포트폴리오 디자인 작업 후 주변 사람들한테 확인 받는게 생각보다 퀄리티 높이는 데 도움이 많이 됐어서 이번에도 해봤는데 역시나 5분도 안되서 이거 왜이러냐는 물음을 받았다

 

데이터를 입힌 모달이 등장할 때 버벅이더라구요

 

진짜 왜저래....

한 2시간 생각한 결과 아무래도 모달 속 iframe안에 데이터가 들어가있어서 데이터 불러오는 속도때문에 로딩속도가 차이나서 발생하는 버벅거림 같아서 컨텐츠 들어가 있는 부모태그에 시간차를 줘봤다

 

참고로 나는 framer-motion 써보고 싶어서 모달 애니메이션으로 적용해봤는데 헉 이래서 plugin쓰나 싶을 정도로 매우 간편...

<AnimatePresence>
    {Open && (
        <motion.aside
            className='modal'
            initial={{ opacity: 0, scale: 0 }}
            animate={{ opacity: 1, scale: 1, transition: { duration: 0.6 } }}
            exit={{ opacity: 0, transition: { duration: 0.6 } }}
        >
            <div className='con' >{props.children}</div>
            <span className='close' onClick={() => setOpen(false)}>
                Close
            </span>
        </motion.aside>
    )}
</AnimatePresence>

이게 기존의 코드다 전체를 감싸는 aside 태그에만 애니메이션 적용한 상태

저 'con' 클래스 적용된 div 태그에도 모션을 주어보려함!

 

<AnimatePresence>
    {Open && (
        <motion.aside
            className='modal'
            initial={{ opacity: 0, scale: 0 }}
            animate={{ opacity: 1, scale: 1, transition: { duration: 0.6 } }}
            exit={{ opacity: 0, transition: { duration: 0.6 } }}
        >
            <motion.div
                className='con'
                initial={{ opacity: 0 }}
                animate={{ opacity: 1, transition: { delay: 0.6 } }}
                exit={{ opacity: 0 }}
            >
                {props.children}
            </motion.div>
            <motion.span
                className='close'
                onClick={() => setOpen(false)}
                initial={{ x: 100, opacity: 0 }}
                animate={{ x: 0, opacity: 1, transition: { delay: 0.7 } }}
                exit={{ x: 100, opacity: 0 }}
            >
                Close
            </motion.span>
        </motion.aside>
    )}
</AnimatePresence>

주는 김에 close 버튼에도 모션 줌ㅎㅎ

 

 

어....? 된다!

해결!!!!!!!!!!