코드 오버라이드 (Override)

오버라이드(Override) 는 캔버스에서 디자인한 요소에 코드로 동작을 덧붙이는 기능입니다. 디자인은 그대로 두고 기능만 추가할 수 있습니다.

언제 쓰나요?

클릭 시 상태 변경, 카운터, 토글
외부 데이터를 가져와 텍스트에 표시
조건에 따라 보이기/숨기기

예시


import type { ComponentType } from "react"
 
export function withHighlight(Component): ComponentType {
  return (props) => {
    return <Component {...props} style={{ ...props.style, background: "#ffeb3b" }} />
  }
}

요소를 선택하고 오른쪽 패널 코드 영역에서 이 오버라이드를 연결하면 적용됩니다.

코드 컴포넌트는 “새 요소를 코드로 만드는 것”, 오버라이드는 “기존 디자인 요소에 코드를 입히는 것”입니다.

다음 단계

API · 외부 데이터 연동