[Framer X Code] Input값 바로 화면에 출력하기(createStore)

들어가기 앞서…

React 경험자들에게:

React를 써보신 분들은 알겠지만, React에서는 그냥 변수를 화면에 띄웠을 때 그 변수의 값이 바뀌어도 재렌더링이 안되기 때문에 useState를 씁니다.

Framer에서도 마찬가지로 var로 선언된 변수는 화면에 바로바로 반영되지 않기 때문에, createStore를 써야 합니다.

 

React 비경험자에게:

React는 딱 1개의 페이지가 렌더링 되어 브라우저에서 보이게 됩니다. 그리고 필요할 때마다 재렌더링됩니다.

만약 특정 값이 변화하고 이를 화면에도 보여줘야 하는 상황일 때, React에서는 useState라는 훅을 사용합니다. 왜냐하면 var로 선언된 변수는 값이 변경되어도 다시 렌더링 되지 않기 때문이에요. var로 선언된 것과 같이 변수지만, 이 변수는 사용법이 조금 다르고 값이 변경될 때마다 다시 렌더링 되어 변경된 값을 화면에 보여줄 수 있습니다. Framer에서는 useState를 쓸 수 없어서, createStore를 사용합니다.

이번 예제는 Input Component에서 받은 Input값을 바로바로 화면에서 볼 수 있도록 Text Layer에 Override를 씌우는.. 겁니다.

 

0. 코드 파일 생성하기

데이터를 공유하기 위해서는 모든 Component와 Override가 한 파일 안에 있어야 합니다.

이번 예제에서는 한 파일 안에서 Code Override와 Code Component를 둘다 생성하기 때문에, 아무렇게나 만들어주시면 됩니다! (코드는 뒤에)

저는 createStore라고 지었습니다.

 

1. createStore Setting

createStore를 쓰기 위해서 몇가지 세팅이 필요합니다.

import { createStore } from "<https://framer.com/m/framer/store.js@^1.0.0>" // createStore import

// store 데이터 정의
const useStore = createStore({
		// {변수명} : {초기값}
    Test1: "",
    Test2: "",
})

1. createStore를 import합니다.
2. store에 넣을 데이터를 정의합니다. (변수, 초기값)

2. Input Component 정의

입력값을 받을 Input component를 코드로 만들어보겠습니다.

// Input Component
export function Input(props) {
		// store를 쓰는 모든 컴포넌트 안에 선언
    const [store, setStore] = useStore()
		// change event
    const onChange = (e) => {
				// store안의 변수에 값을 넣으려면 무조건 setStore({ 변수: 값 })의 형태로 작성해야 합니다.
        setStore({ Test1: e.target.value })
    }
    return <input onChange={onChange} />
}

1. input 태그의 컴포넌트를 만들어 줍니다.
2. 이 컴포넌트에서 store를 사용하기 위해 store를 선언해 줍니다.
3. 입력값이 변경되는 것을 감지하기 위해 onChange를 사용합니다.
4. onChange 함수: 변경된 값을 선언된 store의 Test1라는 변수에 넣어줍니다. (setStore 사용!)

3. Output Override 정의

입력값을 화면에 보여줄 수 있도록 Text Layer에 씌울 Override를 만들어보겠습니다.

import type { ComponentType } from "react"

export function Output(Component): ComponentType {
    return (props) => {
        const [store, setStore] = useStore()
				// Return되는 컴포넌트의 Text에 변수를 넣어줍니다. 
        return <Component {...props} text={store.Test1} />
    }
}

1. ComponentType을 import 합니다.
2. Override 코드를 만들고, store를 사용하기 위해 store를 선언해 줍니다. (store를 사용하는 모든 컴포넌트 안에서 선언해야 합니다.)
3. return 되는 컴포넌트의 text에 변수를 넣어줍니다. (store.{변수명}의 형태로 넣어줍니다)

4. 화면 구성

저는 그냥 createStore라는 페이지에 만들어봤습니다. (Web, Canvas 둘 다 됩니다.)

1. 좌측 사이드바 / Asset에서 Code로 만든 Input Component를 찾아서 프레임에 넣어줍니다.
2. 그 아래에 Text Layer를 만들어주시고, 그 Text Layer에 Override를 씌워주세요. (Text Layer인지 다시 한번 확인해 보세요! 아무 글자나 써놔도 괜찮습니다.)
3. 다 넣었다면, 미리 보기로 확인해 보세요!

5. 결과

짜자잔...

6. 전체 코드

// createStore.tsx

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

const useStore = createStore({
    Test1: "",
    Test2: "",
})

// Input Component
export function Input(props) {
    const [store, setStore] = useStore()
    const onChange = (e) => {
        setStore({ Test1: e.target.value })
    }
    return 
}

// Text 레이어에 씌울 Override
export function Output(Component): ComponentType {
    return (props) => {
        const [store, setStore] = useStore()
        return 
    }
}

---

잘 활용하면 재미있는 것들을 만들 수 있습니다. 저는 숫자를 받아서 Graph 컴포넌트에서 사용하는.. 식으로 많이 사용했습니다 ㅎㅎ!! 

프레이머 공부 아자아자 파이팅! 

gif만드려고 GIPHY Capture 처음 써봤는데, 디게 좋네요 ㅎㅎ