[Framer X Code] Input값 바로 화면에 출력하기(createStore)
·
Framer
들어가기 앞서… React 경험자들에게: React를 써보신 분들은 알겠지만, React에서는 그냥 변수를 화면에 띄웠을 때 그 변수의 값이 바뀌어도 재렌더링이 안되기 때문에 useState를 씁니다. Framer에서도 마찬가지로 var로 선언된 변수는 화면에 바로바로 반영되지 않기 때문에, createStore를 써야 합니다. React 비경험자에게: React는 딱 1개의 페이지가 렌더링 되어 브라우저에서 보이게 됩니다. 그리고 필요할 때마다 재렌더링됩니다. 만약 특정 값이 변화하고 이를 화면에도 보여줘야 하는 상황일 때, React에서는 useState라는 훅을 사용합니다. 왜냐하면 var로 선언된 변수는 값이 변경되어도 다시 렌더링 되지 않기 때문이에요. var로 선언된 것과 같이 변수지만, 이 ..
[Framer X Code] Override로 Hover & Click Effect 만들기
·
Framer
Override 생성하는 방법을 모르신다면... Code Override 만들기 게시글을 먼저 보고 와주세요. Code Override 만들기 : https://minny-it.tistory.com/4 [Framer X Code] Code Override 만들기 *리액트랑 아주 유사합니다. 코드가 처음이신 분들은 조금 어려울 수 있습니다. 코드 override는 인터렉션, 데이터 처리? 좀 더 동적인 화면을 만드는데 쓰입니다. 이 게시글은 https://www.framer.com/deve minny-it.tistory.com 0. 코드 Override 생성하기 우선 Override 파일을 만들어줍니다. 저는 Effects라고 이름을 지었습니다. 1. Override 코드 작성하기 저는 Override 함..
[Framer X Code] Code Override 만들기
·
Framer
*리액트랑 아주 유사합니다. 코드가 처음이신 분들은 조금 어려울 수 있습니다. 코드 override는 인터렉션, 데이터 처리? 좀 더 동적인 화면을 만드는데 쓰입니다. 이 게시글은 https://www.framer.com/developers/guides/overrides/ 를 번역하고 조금 더 자세하게 써놨습니다. (예제 빼고 ㅎ) 코드 Override 생성, 기본 Override 구조, 데이터 공유, 참고사항(about Override, Data from "framer")에 대한 이야기입니다. 0. 코드 Override 생성하기 코드 Override를 생성하기 위해서는... 좌측 사이드바에서 Assets을 선택한다. 하단에 Code의 + 버튼을 누른다. New override를 선택한다. 코드 파일의 ..