인프런 커뮤니티 질문&답변

cjy2957

작성한 질문수

프레이머를 활용하여 쉽고 간단하게 프로토타입 제작하기

Override

Override 쪽 파트 코드창 관련 질문

작성

337

안녕하세요. Override쪽 파트를 수강 관련 질문이 있어서 이렇게 글을 남깁니다. 해당 과정으로 코드창에 들어와보니 강의에서 구현된 코드창과 다른 모습을 보이는데요. 이게 프레이머에서 업데이트 되어 이렇게 노출되는건지 아니면 제가 잘못들어가 이 화면이 노출되는건지 모르겠습니다 ㅠㅠ

프론트 하는 친구에게 물어보니 현재 제가 보는 화면은 리엑트 코드와 거의 유사한 화면이라고 답변 받았습니다..

먼저 제가 맞는 화면을 보는지 궁금하고, 프레이머가 업데이트 된 것이라면 해당 업데이트에 맞춰 강의 내용 업데이트가 가능한지 궁금합니다.

framer 프로토타이핑

퀴즈

프레이머에서 'Override' 기능의 주된 목적은 무엇일까요?

디자인 에셋을 관리하고 공유하기 위해

컴포넌트에 코드를 연결하여 특정 동작을 추가하기 위해

팀원들과 실시간 협업을 진행하기 위해

미리 만들어진 템플릿을 사용하기 위해

답변 1

토마스

지식공유자

안녕하세요 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 문서를 참고 부탁드립니다.

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

cjy2957

작성한 질문수

전체 Q&A

질문하기