[Framer X Code] Code Component 만들기

*리액트랑 아주 유사합니다. 코드가 처음이신 분들은 조금 어려울 수 있습니다. 디자이너분들은 굳이 코드 컴포넌트를 쓸 이유가 전혀 없을 듯합니다. 복잡한 건 개발자한테 고고. 그리고 프레이머는 타입스크립트 씁니다. 저는 타입스크립트를 한 번도 안 써봤지만,,, 파일은 타입스크립트인데 문법은 자바스크립트랑 유사합니다. 그리고 자체 코드 에디터에서 다 바꿔줍니다. 그래소 많이 몰라도 괜츈.

 

이 게시글은 https://www.framer.com/developers/guides/code-components/ 를 번역하고 조금 더 자세히 써놨습니다. 코드 컴포넌트 생성, 기본 코드 컴포넌트 구조, 스타일, Props에 대한 이야기입니다. 

 

0. 코드 컴포넌트 생성하기

코드 컴포넌트를 만들기 위해서는...

1. 좌측 사이드바에서 Assets을 선택한다.
2. 하단에 Code의 + 버튼을 누른다.
3. New component를 선택한다.
4. 코드 파일의 이름을 입력한다. (코드 컴포넌트 이름은 대문자로 시작합니다 -> 파일 이름이 꼭 대문자일 필요는 없네요!)

 

 

Framer 내장 코딩 툴에 예시 코드가 나옵니다. 예시 코드는 항상 나오니까 지워두고...

코드 컴포넌트 구조와 사용해야 하는 친구들을 알려드리겠습니다. 

 

1. 가장 기본적인 코드 컴포넌트 구조

우선 가장 기본적인 코드 컴포넌트의 구조는 이렇습니다. 

export default function ComponentName(props) {
//만약 코드에 여러개를 export하는 경우 default는 그냥 지우시면 됩니다.
    return <div>Return anything...</div>
}

ComponentName에 처음에 코드 컴포넌트를 만들 때 작성한 컴포넌트 이름이 들어가게 됩니다. 우측 상단의 재생 버튼을 누르면 해당 컴포넌트의 프리뷰를 볼 수 있습니다. 위 코드를 작성해 컴포넌트를 만들면 아래처럼 보여집니다. 

 

 

좌측 사이드바의 Assets 패널에 컴포넌트를 보면 ComponentName이라는 이름의 컴포넌트가 생겼습니다. 보시면 알겠지만, 우리가 지정한 이름의 Code Component가 return 뒤에 있는 친구를 내뱉습니다. return 뒤에를 이쁘게 만들고 싶으시다면, 리액트를 공부하시면 됩니다 ㅎㅎ..

 

2. 코드 컴포넌트에 스타일 입히기

export default function ComponentName(props) {
    const style = {
        display: "inline-block",
        backgroundColor: "orange",
        padding: 8,
    }
    return <div style={style}>Return anything...</div>
}

style은 함수? 컴포넌트? 바깥에 선언해도 무방합니다. (뭐 다 아시겠지만..) return 뒤 div 태그에 스타일을 지정하면 됩니다. 스타일을 입히고 화면은... 

옆 프리뷰를 보면 스타일이 입혀져 있는 게 보입니다. 굿. 스타일을 이쁘게 입히고 싶다면, CSS 공부를 하시면 됩니다. 

 

3. 코드 컴포넌트에 Property 더하기

만약 버튼 컴포넌트를 만들건대 하나는 "저장하기" 다른 하나는 "공유하기"라는 텍스트가 들어간다면? 코드 컴포넌트를 2개 만들어야 할까요? (완전 비효율적이야...) 그것보다는 컴포넌트 1개를 만들고, 중간에 들어가는 텍스트를 props로 받아 버튼 안에 넣어주는 게 편할 거예요! 피그마에서도 컴포넌트 안에 텍스트는 수정 가능한 것처럼요! 

 

그 기능을 코드로 구현하기 위해서 2가지를 import 하고 사용해줄 거예요. 

• addPropertyControls : props를 정의해줄 때 필요한 친구
• ControlType : props의 타입을 정의해줄 때 필요한 친구 (타입스크립트라서 필요한듯?)

import { addPropertyControls, ControlType } from "framer"

export default function ComponentName(props) {
    const style = {
        display: "inline-block",
        backgroundColor: "orange",
        padding: 8,
    }
    return <div style={style}>{props.text}</div>
}

ComponentName.defaultProps = {
    text: "My Title",
}

addPropertyControls(ComponentName, {
    text: {
        title: "Text",
        type: ControlType.String,
    },
})

코드 컴포넌트 옆 괄호 안에 있는 props로 데이터를 가져온다고 생각하시면 됩니다. 

• defaultProps : 초기값 세팅
• addPropertyControls(ComponentName, {...} : props 생성, 코드 컴포넌트 이름을 적어주고 props를 정의합니다.
  • props 이름 (위 코드에서는 "text") :  function 내에서 해당 값에 접근할 때는 props.text 와같이 씁니다.
  • title : 캔버스에서 보일 이름
  • type : props 값의 타입 (String, Number, Boolean, Array, Object, Image, ComponentInstance, Color, Enum, File 등... 지대 많음) -> https://www.framer.com/docs/property-controls/ 참고

리턴 뒤 div 태그 안에 들어가는 텍스트에 props.text를 넣어줬습니다! 코드 에디팅 창에서는 차이를 잘 모르겠지만, 캔버스로 다시 돌아오면 확실하게 차이를 알 수 있어요.

좌측 사이드바의 Assets 패널을 보면 ComponentName(우리가 코드로 만든 컴포넌트)가 추가되어있는 걸 볼 수 있습니다. 클릭 앤 드래그로 캔버스에 끌어다 놓아 사용하면 돼요. 그리고 우리가 정의한 props를 우측 패널에서 확인할 수 있습니다. props에 여러 개를 정의하면, 여러 개를 넣을 수 있게 칸이 생기고, 저기에 Text를 바꾸면 컴포넌트 안에 텍스트가 바뀌게 됩니다.

이렇게 사용하면 됩니다 ㅎㅎㅎㅎ 근데 저는 코드 컴포넌트 그렇게 많이 안 써요... 애초에 디자인적인 부분을 코드로 구현하고 싶지 않아서 프레이머로 넘어온 거라서요!