본문 바로가기

Frontend145

Framer motion : scroll Animation에 대하여 Framer motion에서 scroll animation 기능은 스크롤과 연동된 애니메이션을 구현할 수 있도록 도와준다. 크게는 (1) scroll-linked animation (스크롤 진행에 따라 애니메이션이 직접적으로 연동되는 방식)과 (2) scroll-triggered animation (요소가 뷰포트에 들어오간 나갈 때 애니메이션이 트리거 되는 방식)으로 나눈다.  Scroll-linked animationscroll-linked animation 은 useScroll 훅을 통해서 스크롤과 연동된 애니메이션을 구현한다. scrollX / scrollY : 페이지의 수평 및 수직 스크롤 위치를 픽셀 단위로 반환한다.scrollXProgress / scrollYProgress : 페이지의 수평 .. 2024. 9. 28.
Framer motion : Layout Animation에 대해 알아보자 Framer motion의 Layout Animation은 UI 요소의 레이아웃 애니메이션을 부드럽게 전환할 수 있도록 돕는다. 아코디언 메뉴, 리스트 아이템의 추가 및 제거, 드래그 앤 드롭 동작에서의 애니메이션 등에서 사용한다.layout 개별 요소에 애니메이션 효과를 적용할 때 사용한다. 해당 요소의 크기나 위치가 변경될 때 자동으로 애니메이션이 적용된다. 여러 개의 요소를 그룹화(layoutId 사용)하여 함께 애니메이션 효과가 적용될 수 있도록 하는 컴포넌트다. 그룹 내에서 애니메이션 효과가 조화롭게 이루어진다. layout 사용하기개별 요소에 layout 속성을 삽입하면 자동으로 애니메이션이 적용된다. 아래 예제는 에 layout가 있을 때와 없을 때의 차이점이다. layout을 사용했을 때 .. 2024. 9. 28.
Framer motion : 제스처(Gestures)에 대해서 (2) drag, pan hover, focus, tap에 대한 내용은 따로 작성한 글이 있다. 이번 글에서는 제스체 중에 drag와 pan에 대해서 알아보고자 한다.제스처설명hover마우스 커서가 요소 위에 올려졌을 때 발생하는 제스처focus요소가 포커스를 받을 때 발생하는 제스처tap사용자가 요소를 클릭하거나 터치했을 때 발생하는 제스처drag사용자가 요소를 클릭하고 드래그하여 위치를 변경할 수 있는 제스처pan사용자가 요소를 누르고 기존의 화면서에서 3픽셀 이동해야 인식되는 제스처 Drag관련 이벤트이벤트는 사용자가 요소를 클릭하고 드래그하여 다른 위치로 이동할 수 있도록 하는 기능을 제공한다. 이벤트설명drag드래그 가능 여부를 설정한다. onDragStart사용자가 드래그를 시작할 때 호출되는 함수 (드래그 시작 시).. 2024. 9. 28.
Framer motion : 제스처(Gestures)에 대해서 (1) hover, focus, tap Framer motion의 제스처는 사용자가 웹 페이지나 어플리케이션과 상호작용하는 방식을 얘기한다. Framer motion의 주요 제스처는 호버(hover), 포커스(focus), 탭(tap), 드래그(drap), 팬(pan) 등이 있다. 제스처설명hover마우스 커서가 요소 위에 올려졌을 때 발생하는 제스처focus요소가 포커스를 받을 때 발생하는 제스처tap사용자가 요소를 클릭하거나 터치했을 때 발생하는 제스처drag사용자가 요소를 클릭하고 드래그하여 위치를 변경할 수 있는 제스처pan사용자가 요소를 누르고 기존의 화면서에서 3픽셀 이동해야 인식되는 제스처 리액트에서 제공하는 onMouseOver, onClick, onFocus 이벤트 경우에는 framer motion 에서 정의된 프로퍼티와 함께.. 2024. 9. 28.
React-router-dom: createBrowserRouter에 대해서 createReactRouter는 리액트 라우터 v6.4이후에 도입된 기능으로, 라우터 객체를 생성하는데 사용하는 메서드이다. 브라우저 기반 라우팅을 더 간편하게 설정할 수 있도록 돕는다. 이를 통해 라우터와 관련된 설정을 더 구조화되고 직관적으로 관리할 수 있다.  기존의 경우 (1) 로 컴포넌트를 감싸고 이후에 (2) path와 element를 설정했다. } /> } />  createBrowserRouter를 사용하면 아래처럼 간편하게 정의할 수 있다. const router = createBrowserRouter([ { path : '/home', element: }, { path : '/about', element: }, ]); createBro.. 2024. 9. 26.
React-router-dom: 리액트 라우터 훅에 대해 알아보자 Home v6.26.2 | React Router Home v6.26.2 | React Router reactrouter.comReact-router-dom에 여러가지 훅이 있다. 더 많은 훅들은 위의 홈페이지에 들어가서 확인할 수 있다. 이번 게시물에서는 useParams, useSearchParams, useNavigate 훅에 대한 내용을 다룰 예정이다. useParamsuseParams는 URL의 동적 파라미터 값을 가져오는 훅으로, URL에 정의된 파라미터를 키-값의 형태의 객체를 반환하여 동적 라우팅을 구현한다.  1. 동적 파라미터를 사용할 컴포넌트의 Route에 가변인자값명을 설정한다 ( :가변인자값명 )URL의 특정 부분을 변수처럼 사용하여 해당 값을 컴포넌트에서 접근할 수 있다.impo.. 2024. 9. 25.

티스토리툴바