Chakra-ui + Famer motion <motion.Box>(?)

NextJS 상에서 Chakra-ui + Famer motion을 이용한 웹 개발을 개인적으로 하고 있는데.

Famer motion 퓨전 이용에 대한 이해가 없는 상태로 개발하다보니.. 

Box에 대한 잘못된 사용 에러

작동은 하는데 어느덧 콘솔상으로 무수히 많은 Warnning들이 쌓여있었다.

나중에 한꺼번에 고쳐야지 하고 있다가 팀원과 배포전에 잠깐 서칭에 들어갔다..

결론은. 공식 문서를 잘 읽자^^ 이다.

 

Chakra-ui 공식 문서에는 Famer motion을 이용한 퓨전 개발을 공식적으로 지원한다.

때문에 나는 Chakra-ui 상에 <div> 태그인 <Box>를 임포트해서 사용 하고 있었다.

거기에 공식적으로 Famer motion을 지원하니 모션을 위한 famer motion 태그를 적용해서

import { Box, chakra, Container, useColorModeValue, Button, Input, Flex,} from '@chakra-ui/react'
import { motion, useMotionValue } from "framer-motion"

<motion.Box>
.
.
.
</motion.Box>

위와 같은 식으로 사용하고 있었다^^

Chakra에서 지원하니.. 저렇게 motion을 바로 붙여도 되는 줄 알았다.. 바보 같이..

그리고 당연하게도 웹페이지상에서는 컴포넌트와 모션 모두 잘 작동했다.

하지만 내부적으로는

무수한 Warnning과 코딩하고 리로드시  Fast Refresh에 리로드에 대한 경고가

콘솔 상에서 쌓여가고 있었다.

https://nextjs.org/docs/basic-features/fast-refresh

Basic Features: Fast Refresh | Next.js

(참고)

 

때문에 이슈 서칭 중에 어렵지 않게 그 답을 찾을 수 있었다..

부끄럽게도.. 다 읽었다고 자신한 "공식 문서"에서 말이다..

https://chakra-ui.com/getting-started/with-framer

Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React a

chakra-ui famer motion 퓨전 개발에 대한 공식 문서

chakra-ui 공식 도큐에 famer motion을 이용한 개발에 대한 문서이다.

예시 코드에서는 const로 ChakraBox를 따로 선언해서 chakra(motion.div) 로 쓴다.

      <ChakraBox
        animate={{
          scale: [1, 2, 2, 1, 1],
          rotate: [0, 0, 270, 270, 0],
          borderRadius: ["20%", "20%", "50%", "50%", "20%"],
        }}

코드 상으로 Box에 famer motion을 적용하여 쓸 때 사전에 선언한 ChakraBox로 motion을 적용해서 쓰인다..

 

곧 바로 내 코드들을 수정 했고..

콘솔창은 평화를 되찾았다..

 

오늘의 교훈..!

공식 문서는 두번 세번 정독 하자 :)