Override 쪽 파트 코드창 관련 질문

22.03.11 00:27 작성 조회수 161

0

안녕하세요. Override쪽 파트를 수강 관련 질문이 있어서 이렇게 글을 남깁니다. 해당 과정으로 코드창에 들어와보니 강의에서 구현된 코드창과 다른 모습을 보이는데요. 이게 프레이머에서 업데이트 되어 이렇게 노출되는건지 아니면 제가 잘못들어가 이 화면이 노출되는건지 모르겠습니다 ㅠㅠ
 
프론트 하는 친구에게 물어보니 현재 제가 보는 화면은 리엑트 코드와 거의 유사한 화면이라고 답변 받았습니다..
 
먼저 제가 맞는 화면을 보는지 궁금하고, 프레이머가 업데이트 된 것이라면 해당 업데이트에 맞춰 강의 내용 업데이트가 가능한지 궁금합니다.
 

답변 1

답변을 작성해보세요.

0

안녕하세요 cjy2957님, Override 쪽에서 질문이 있으시군요.

현재 framer는 지속적인 업데이트로 인해 화면 및 규격이 계속 바뀌고 있어요. 말씀주신 화면은 framer의 Override 기능을 활용하는 Library가 "Override from framer"에서 "ComponentType from react"로 바뀌어서 생기는 현상입니다.

import type { ComponentType } from "react"
import { Override } from "framer"
// 각기 다른 Library에서 import

export function withHoverComponentType(Component): ComponentType {
    return (props) => {
        return <Component {...props} whileHover={{ scale: 1.05 }} />
    }
}
// ComponentType을 이용한 code

export function withHoverOverride(props): Override {
    return {
        whileHover: { scale: 1.05 }
    }
}
// Override를 이용한 code

상기 코드는 ComponentType과 Override Library를 사용한 간단한 코드인데요, 보이는 모습은 다르지만 완전히 동일한 기능을 가지고 있습니다. 현재 framer에서 새로운 Override 코드를 생성하면 말씀주신 내용과 같은 화면이 나올거에요. 그 내용을 모두 지우고 강의 속 코드를 그대로 활용하면 작동합니다! 다만 새로운 코드를 사용하면 속도랑 버그와 같은 부분에서 좀 더 자유롭다고 볼 수 있겠네요.

문의주신 내용을 강의 전반에 모두 담기에는 너무 변경된 부분이 많아서요, 업데이트보다는 새로운 강의로 찾아뵙는게 더 효과적일 것 같아요. 다만 본업이 바빠서(핑계...) 추후 강의는 시간이 걸릴 듯 합니다.

좀 더 자세한 내용은 framer의 Override API 문서를 참고 부탁드립니다.

강의 봐주셔서 감사합니다!