본문 바로가기

전체보기209

Framer motion : Reorder을 통해 리스트 항목을 정렬해보자 Reorder은 리스트 항목을 드래그 앤 드롭으로 쉽게 재정렬할 수 있도록 도와주는 컴포넌트이다. 애니메이션 효과를 통해 부드럽고 자연스럽게 순서를 변경할 수 있도록 도와준다.      Reorder 속성axis = "x | y"드래그 가능한 방향(x: 수평, y: 수직)을 설정한다.  Reorder 사용하기1. Reorder 컴포넌트로 목록을 감싸고, 각 리스트를 Reorder.Item으로 설정한다.각 리스트 항목에는 고유한 value가 필요하다. import { useState } from "react"import { Reorder } from "framer-motion";function Comp01() { const [items, setItems] = useState(["item1", "ite.. 2024. 10. 19.
Framer motion : AnimatePresence에 대해서 AnimatePresence는 Framer Motion에서 제공하는 컴포넌트로 조건부로 렌더링되는 애니메이션을 처리할 때 유용하다. AnimatePresence를 사용하면 요소가 DOM에서 제거될 때(exit props에 애니메이션 전달) 애니메이션을 적용할 수 있다.     key={item아이디}  intial={{초반 애니메이션}}  animate={{애니메이션}}  exit={{제거될 때 애니메이션}}/>wait는 현재 애니메이션이 끝난 후 다음 애니메이션이 시작되고, async의 경우 모든 애니메이션이 동시에 시행된다.  AnimatePresence 사용하기1. motion 태그를 설정한다. const SlideShow = ({ image }) => ( )const images = .. 2024. 10. 19.
Framer motion : useAnimationFrame에 대해서 useAnimationFrame은 매 애니메이션 프레임마다 호출되어, time과 delta를 인수로 받아 콜백을 매 프레임마다 시행한다. 보다 매끄러운 애니메이션 효과를 구현할 수 있다. time : 콜백이 처음 호출된 이후의 총 시간 (밀리초)delta : 마지막 애니메이션 프레임 이후의 시간 (밀리초) useAnimationFrame 사용하기1. useRef를 사용하여 useAnimationFrame를 사용할 요소를 참조한다. import { useAnimationFrame } from "framer-motion";import { useRef } from "react";// useRef로 설정export default function Comp11() { const ref = useRef(null.. 2024. 10. 19.
Framer motion : useInView 에 대해서 useInView는 Framer Motion에서 제공하는 훅으로, 특정 요소가 뷰포트(viewport)에 들어왔는지 감지하여 스크롤 이벤트에 따라 애니메이션 효과를 적용할 수 있다. const ref = useRef(null) ; // 이후 뷰포트의 기준이 되는 요소에 ref를 지정한다. const 변수명 = useInView(ref, {useInView 추가 속성 설정}); useInView 추가 속성속성설명root뷰포트의 기준이 되는 요소를 지정한다. margin뷰포트에 들어오기 전에 얼마만큼의 여유를 두고 애니메이션이 시작될지를 지정한다. 마진은 px 또는 %로 정의한다.once애니메이션이 한 번만 실행되도록 설정하는 데 사용된다. amount크롤 위치에 따른 애니메이션의 비율을 지정하는 데 사용한.. 2024. 10. 19.
React-router-dom : loader 함수를 통한 URL 가져오기 loader 함수는 페이지가 렌더링되기 전에 데이터를 미리 로드하는 함수로, params와 request를 통해서 URL 파라미터 및 쿼리 문자열을 사용할 수 있다. loader 함수의 params의 경우에 리액트 라우터의 useParams과 같은 정보를 제공하지만, 웹 페이지가 렌더링이 되기 전에 데이터를 가지고 있다는 차이점이 있다.  URL 가져오기 예시1. 다중 가변 인자 URL 경로 사용 예시 예시 : /category1/item1(1) App.jsx 에서 라우트 정의 및 load 함수 정의import { createBrowserRouter, RouterProvider } from "react-router-dom"import Root from "./pages/Root"import Home fro.. 2024. 10. 18.
Vue: 템플릿 문법에 대해서 (2) 디렉티브Vue에서 사용되는 HTML 요소에 특별한 동작이나 기능을 부여하는데 사용되는 특수 속성이다.디렉티브설명v-text엘리먼트의 textContent를 업데이트 한다.v-html엘리먼트의 innerHTML을 업데이트 한다.v-show참-거짓을 기반으로 CSS 속성 중 display 를 전환한다. 초기 조건과 관계없이 항상 렌더링된다.v-if참-거짓에 따라 엘리먼트를 조건부로 렌더링한다.v-elsev-if 또는 v-else-if의 'else block'을 나타낸다. v-for엘리먼트 또는 템플릿 블록을 여러번 렌더링한다. v-on이벤트 리스너를 추가한다.  ( 단축문법 : @ )v-bindHTML 요소의 속성을 Vue인스턴스의 데이터와 동적으로 바인딩한다. (단축문법 : : 혹은 . ) v-model양.. 2024. 10. 17.

티스토리툴바