[Framer X Code] Code Override 만들기

*리액트랑 아주 유사합니다. 코드가 처음이신 분들은 조금 어려울 수 있습니다. 코드 override는 인터렉션, 데이터 처리? 좀 더 동적인 화면을 만드는데 쓰입니다.

 

이 게시글은 https://www.framer.com/developers/guides/overrides/ 를 번역하고 조금 더 자세하게 써놨습니다. (예제 빼고 ㅎ) 코드 Override 생성, 기본 Override 구조, 데이터 공유, 참고사항(about Override, Data from "framer")에 대한 이야기입니다.

 

0. 코드 Override 생성하기

코드 Override를 생성하기 위해서는...

1. 좌측 사이드바에서 Assets을 선택한다.
2. 하단에 Code의 + 버튼을 누른다.
3. New override를 선택한다.
4. 코드 파일의 이름을 입력한다. ( 파일 이름은 대문자로 시작! )

Framer 내장 코딩 툴에 예시 코드가 나옵니다. 컴포넌트와 마찬가지로 예시 코드는 지워두고...

Override 구조와 import 해야 하는 친구들을 알려드리겠습니다. 

 

1. 가장 기본적인 Override 구조

우선 가장 기본적인 Override 코드는 이렇습니다. 

import type { ComponentType } from "react"

export function overrideName(Component): ComponentType {
	return (props) => {
		return <Component {...props} />
    }
}

우선 react에서 type과 ComponentType를 import 해줍니다. overrideName은 직관적으로 알아서 작명해주시면 됩니다. 코드 컴포넌트와는 다르게 override는 프리뷰에서 볼 수 없습니다. 그래서 override를 씌운 컴포넌트나 화면을 프리뷰 하면서 코드를 수정하면 됩니다. 

코드를 보면 요소 혹은 컴포넌트에 override를 씌우면, 그 컴포넌트의 property를 변경해 반환하는 구조입니다. 

 

2. 데이터 공유하기

데이터를 공유하기 위해 createStore라는 친구를 사용할 겁니다. (왜인지는 모르겠지만 useState를 못쓰더라고요? 아무튼 프레이머에서는 useState 대신 createStore를 씁니다!)

자세한 설명은... https://minny-it.tistory.com/10

import type { ComponentType } from "react"
import { createStore } from "https://framer.com/m/framer/store.js@^0.3.0" //createStore import

const useStore = createStore({ count: 0 }) //store 정의

export function overrideName(Component): ComponentType {
    return (props) => {
        const [store, setStore] = useStore() //store 선언
        return <Component {...props} />
    }
}

1. createStore를 import 해줍니다.
2. store에 넣을 데이터를 정의해줍니다.
3. store에 있는 데이터를 사용할(혹은 변경할) 컴포넌트 혹은 override에 store를 선언해줍니다. (선언하지 않으면 사용 불가)

3. Override 적용하기

아주 간단한 예시로 override를 적용하면 배경이 노란색으로 바뀌도록 만들어보겠습니다. Override.tsx에 이렇게 코드를 써줬습니다.

import type { ComponentType } from "react"
import { createStore } from "https://framer.com/m/framer/store.js@^0.3.0" //createStore import

const useStore = createStore({ background: "#ffff00" }) //store 정의

export function setBackYellow(Component): ComponentType {
    return (props) => {
        const [store, setStore] = useStore() //store 선언
        return (
            <Component
                {...props}
                style={{ backgroundColor: store.background }}
            />
        )
    }
}

그리고 배경을 노란색으로 바꿔주고 싶은 프레임을 선택합니다. 우측 페널 하단에 Code Overrides에 +를 누르고, 파일과 Override를 세팅해줍니다. 

당장의 화면에서는 안 보이지만, 프리뷰로 보면 아래처럼 배경이 노랗게 바뀐 걸 볼 수 있습니다. 

4. 참고

프레이머 코드를 찾아보다 보면 아래 같은 경우가 있는데, 

1. ComponentType 대신 Override를 framer에서 import 해서 사용하는 경우
2. createStore 대신 Data를 framer에서 import 해서 사용하는 경우

이는 현재 버전의 프레이머에서 권유하는 방식이 아니기 때문에, 코드는 참고하되 ComponentType과 createStore를 사용하도록! 하는 것이 좋을 것 같습니다. 

Override와 Data는 전면 업데이트 전에 사용하던 방식이기 때문입니다. 그치만... 저거 쓴 코드들을 모두 배제하면... 참고할 코드가 너무 많이 사라짐...

---

앞에서 말한 것과 같이 override는 대체로 아래와 같은 경우에 사용합니다. 

1. 동적으로 데이터를 보여줄 경우
2. 데이터를 처리할 경우
3. 상태에 따라 컴포넌트에 변경을 줄 경우
4. 모션 처리를 해줄 경우
5. 등등... 

override를 잘하면 굳이 리액트를 사용해서 css로 레이아웃 잡고 할 필요가 없어지는 것 같아요 ㅎㅎ (제 원래 의도대로...)

하지만 너무 많이 붙여놓으니까 좀 느려지더라고요! 적절하게 필요한 것만 잘 사용하는 것이.. 중요하겠습니다!!