Frontend145 React-router-dom: Outlet에 대하여 을 사용하게 되면 컴포넌트가 중첩(nested router)되었을 경우, 상위 컴포넌트는 유지되면서 하위 컴포넌트만 렌더링할 수 있다. UI의 일관성은 유지하면서 특정 부분만 업데이트 할 수 있다. Outlet 사용하기1. 유지되어야 하는 상위 컴포넌트에 Outlet을 사용한다. 해당 예제에서는 유지되어야 하는 부분은 타이틀과 페이지 이동 버튼이다. import { NavLink, Outlet } from "react-router-dom"import styles from "./css/Page.module.css"export default function Page() { const activeStyle = { color: "purple", } return ( .. 2024. 9. 25. React-router-dom: <Link>와 <NavLink>에 대해서 Link웹 페이지에서 이동 기능을 가진 태그의 경우, 클릭하게 되면 브라우저가 새로고침되어 기존의 상태 값이 초기화된다. React Router에서는 태그 대신 컴포넌트를 사용하여 태그와 유사한 동작을 하면서도 페이지를 새로고침 하지 않고 URL경로만 변경할 수 있도록 한다.링크import Home from './components/Home'import About from './components/About'import { Route, Routes, Link } from 'react-router-dom'import Intro from './components/Intro'import './App.css'function App() { return ( 페이지 이동 버튼 Intro .. 2024. 9. 25. Framer motion : variants에 대해서 Framer motion에서 variants는 애니메이션의 다양한 상태를 미리 정의하여 반복되는 애니메이션 등의 사용을 간편하게 작성할 수 있다. 하나의 데이터로 여러 곳에서 사용할 수 있어 코드 중복을 줄이고 가독성을 높인다. 1. variants 생성 clickVariants를 생성하여 요소들에게 마우스를 올려놨을 때나 클릭했을 때의 애니메이션을 설정한다.const clickVariants = { initial: { scale: 1 }, hover: { scale: 1.1 }, press: { scale: 0.9 },}; 2. 태그 안에 variants={variants이름} 작성버튼클릭 3. 애니메이션을 적용할 곳에 key 값을 작성initial은 initial에, hover는 .. 2024. 9. 24. Framer motion: keyframes에 대해 알아보자 CSS의 keyframes와 유사한 방식으로 framer motion에서도 keyframes 기능을 사용할 수 있다. animate 값의 배열을 설정하여 여러 단계의 애니메이션을 정의할 수 있다. 기본적으로 각 keyframe은 균등한 시간 동안 시행되지만, times를 사용하면 설정하는 시간에 맞춰 애니메이션이 동작할 수 있도록 할 수 있다.animate = {{ CSS속성명 : [값1, 값2, 값3 ... ] }} transition = {{ times : [0, 값1, 값2, 값3, ... , 1 ]}}import { motion } from "framer-motion";export default function Comp01() { return ( Framer.. 2024. 9. 24. Framer motion : Transition 속성 종류에 대해 알아보자 Framer motion의 transition의 경우에는 css 속성 중 transition과 관련된 별도의 속성이 사용된다.속성설명duration애니메이션이 지속되는 시간 설정 (단위 : 초)delay애니메이션이 시작되기 전에 지연되는 시간 설정 (단위 : 초)ease애니메이션의 시간 흐름에 따른 매개변수의 변화율(easing함수)를 설정* 기본값 : easeInOut | linear | easeIn | easeOut | easeInOuttype애니메이션의 유형을 설정 *기본값 : spring | tween | inertia stiffness스프링애니메이션의 강성(물체가 변형에 저항하려는 성질)을 설정damping스프링애니메이션의 감쇠(물체의 운동을 저지시키려는 힘)를 설정mass스프링애니메이션의 질.. 2024. 9. 24. Framer Motion 시작하기 Documentation | Framer for Developers Documentation | Framer for DevelopersAn open source, production-ready motion library for React on the web.www.framer.com Framer Motion은 React에서 애니메이션과 상호작용을 쉽게 구현할 수 있도록 도와주는 라이브러리이다. 위의 사이트에서 다양한 예제를 확인할 수 있다. Framer Motion 시작하기 Framer motion을 사용하기 위해서 우선 설치가 필요하다.npm install framer-motion --save 1. framer-motion 에서 motion을 받아온다.import { motion } from "fra.. 2024. 9. 24. 이전 1 2 3 4 5 6 7 ··· 25 다음