react hooks (4) 썸네일형 리스트형 [motion] React에서 useScroll 훅 가이드 - 옵션과 사용법 정리 useSpring은 스프링 애니메이션을 구현하는 데 사용되는 훅입니다. 이 훅은 값을 변경할 때 자연스러운 스프링 물리 효과를 적용하여 부드러운 애니메이션을 제공합니다. useSpring의 사용 방법과 설정 옵션을 공식 문서를 바탕으로 정리해 보겠습니다.사용 방법1. 직접적인 값 설정useSpring을 초기 값과 함께 사용하여 스프링 애니메이션을 생성할 수 있습니다.예: const x = useSpring(0)와 같이 초기 값을 설정하고, x.set(100)으로 값을 변경하면 스프링 애니메이션으로 100으로 전환됩니다.즉시 값을 변경하고 싶다면 x.jump(100)을 사용할 수 있습니다.2. 다른 모션 값 추적다른 모션 값을 전달하여 그 값이 변경될 때마다 스프링 애니메이션을 적용할 수 있습니다.예: c.. [motion] React에서 useScroll 훅으로 스크롤 애니메이션 구현하기 Framer Motion의 useScroll 훅은 스크롤 이벤트를 감지하고 이를 통해 애니메이션을 구현하거나 UI를 동적으로 변경하는 데 사용됩니다. 이 훅은 스크롤 위치에 대한 정보를 제공하며, 이를 통해 다양한 애니메이션 효과를 쉽게 구현할 수 있습니다.useScroll의 용도 및 기능스크롤 위치 추적: useScroll은 현재 스크롤 위치를 추적하여 이를 기반으로 애니메이션을 적용할 수 있습니다.모션 값 반환: 이 훅은 scrollX, scrollY, scrollXProgress, scrollYProgress라는 네 가지 모션 값을 반환합니다.scrollX와 scrollY: 픽셀 단위로 현재 스크롤 위치를 나타냅니다.scrollXProgress와 scrollYProgress: 0에서 1 사이의 값을.. [React] form submit과 관련된 useFormStatus 훅 useFormStatus는 마지막 폼 제출의 상태 정보를 제공하는 Hook입니다form 이 pending 상태일 때 다른 이벤트를 주고 싶을 때 사용하는 용도로 사용됩니다.(예 : submit 버튼의 텍스트를 submitting... 으로 바꾼다던지 ) const { pending, data, method, action } = useFormStatus(); tanstack query 의 useQuery 에서 보던 형태이다. pending: 불리언 값입니다. true라면 상위 이 아직 제출 중이라는 것을 의미합니다. 그렇지 않으면 false입니다. data: FormData 인터페이스를 구현한 객체로, 상위 이 제출하는 데이터를 포함합니다. 활성화된 제출이 없거나 상위에 이 없는 경우에는 null입니다... [React] memo useMemo useCallback 차이와 사용 판단법 React에서 제공하는 주요 성능 최적화 Hook들의 특징과 사용법을 알아봅니다. memo컴포넌트 자체를 메모이제이션하여 불필요한 리렌더링을 방지합니다. 컴포넌트가 리렌더링할 때 React는 이것의 모든 자식을 재귀적으로 재렌더링합니다.부모 컴포넌트가 정상적으로 다시 리랜더링 된 후, 자신의 리랜더링 차례가 됬을 때,리랜더링 전후 props를 비교하여 동일하면 (배열이거나 객체이면 얕은 비교만 수행합니다) 리랜더링을 하지 않습니다. 기본 문법const MyComponent = React.memo(function MyComponent(props) { // 컴포넌트 로직});사용 예시import React from 'react';const Counter = ({ count }) => { return {c.. 이전 1 다음
