[bblog 3.5] 리액트 컴포넌트의 상속, 그리고 Framer-motion 를 사용해보자

HS ::

framer-motion의 예제를 보다보면 항상 이런 코드들이있다 

 

<motion.div>

... 내가 원하는 코드들

</motion.div>

 

이게 이전부터 보면서 정말 꼴보기 싫다 라는 생각도하고

 

막상 통일성을 위해서 똑같은 코드를 또 다시 쓰고 쓰고쓰고 .. 하는 것이 정말 귀찮았다 

실무에서는 vue를 쓰면서 항상  slot으로 컴포넌트들을 상속받아 일관성을 유지하고있었는데 

 

react에서는 막상 상속받아 할 일이 없어 쓰지 않고 있던 도중 .. 이와 같은 문제에 직면하게 되었고 

당장 어떻게하는지 찾아보고 프레이머 모션을 적용하기위한 코드로 사용해보았다 

 

import { chakra, shouldForwardProp } from '@chakra-ui/react'
import { motion } from 'framer-motion'
import { ReactNode } from 'react'

const StyledDiv = chakra(motion.div, {
    shouldForwardProp: (prop) => {
        return shouldForwardProp(prop) || prop === 'transition'
    },
})

const Section = ({ children, delay = 0 }: { children: ReactNode; delay?: number }) => {
    return (
        <StyledDiv initial={{ y: 20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ duration: 0.8, delay } as any} mb={6}>
            {children}
        </StyledDiv>
    )
}

export default Section

이번에 자주사용하게된 Section이라고 명명한 프레이머 모션을 사용한 코드이다 

 

이전부터 생각하던건데, 이미 알고있던내용인데 왜 찾아보게 되었을까라는 생각을 하게되었다

 

당연스레 props로 들어간 children은 비슷한 성질로 이미 [1, 2, 3].map(val=> <section>{val}</section>) 이런식으로 쓰고있었는데 

 

당연히 props로도 내리는 것이 되는 것도 어느정도 인지 하고있었을텐데 .. 

 

뭐 여하튼 .. 코드는 motion.div와 차크라팩토리 

https://chakra-ui.com/docs/styled-system/chakra-factory

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

를 사용하여 두컴포넌트를 합쳐서 새로운 Section태그작성, 사용하는 방식으로 진행하였다 

 

매우 좋다 .. 

 

이런식으로 상속에 상속을 이어가는것 ..

 

어찌보면 자바의 인터페이스를 받고받아들어가는 것과 비슷한 느낌이지만 

 

그래도 알고 상속받아 쓰는것과 모르는상태에서 툴만 익혀쓰는 것은 천지차이..

 

만들면서 또 재미있는 공부가 되었다