Frontend145 Framer motion : MotionConfig으로 전역으로 애니메이션을 설정해보자 MotionConfig는 애니메이션을 전역으로 설정할 수 있는 컴포넌트이다. 모든 컴포넌트에 적용 될 기본 애니메이션 설정을 한번에 할 수 있다. transition은 모든 모션 컴포넌트에 적용될 기본 transition 속성을 설정하고, reduceMotion에서 "user"는 사용자의 설정에 따라, "always"는 항상 애니메이션을 최소화하고, "never"은 애니메이션을 항상 적용한다는 의미의 속성이다. MotionCongif 사용하기1. 전역으로 적용할 transition 속성을 컴포넌트에 정의한다.import { MotionConfig, motion } from 'framer-motion';function App() { return ( .. 2024. 10. 19. 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. 이전 1 2 3 4 ··· 25 다음