gsap

✅ useLayoutEffect란?📌 컴포넌트가 화면에 그려지기 직전에 동작하는 리액트 훅입니다.🕒 실행 타이밍:훅 실행 시점 useEffect화면에 렌더링된 후 (비동기)useLayoutEffectDOM 업데이트 전 (동기) ❓언제 useLayoutEffect를 써야 해?✅ DOM의 크기나 위치를 측정하거나✅ 애니메이션 라이브러리(예: GSAP)를 사용할 때!이유는:useEffect는 화면이 그려진 후에 실행되기 때문에, 애니메이션 시작 전에 깜빡임(flicker)이 생길 수 있음useLayoutEffect는 렌더링 직후, 브라우저가 화면에 반영하기 전에 실행돼서 더 자연스럽게..

React

GSAP

2025.05.23

1. GSAP란?자바스크립트 애니메이션 라이브러리로, 자연스러운 애니메이션을 쉽게 만들 수 있음React에서도 gsap + ScrollTrigger 플러그인으로 스크롤 기반 애니메이션 구현 가능2. React에서 GSAP 사용법 (TypeScript 포함)useRef로 DOM 요소 참조useEffect에서 gsap.to 또는 ScrollTrigger 초기화querySelectorAll 로 여러 요소 선택 시 타입 명시 추천querySelector는 한 개 요소 선택, null 체크 필수3. 배열 vs 단일 요소 선택여러 요소 다룰 때 querySelectorAll + 반복문 사용한 개 요소만 다룰 때 querySelector + null 체크작은 프로젝트에 한 컴포넌트 내 3개 요소 모두 카운팅 효과 넣..

728x90

gsap

useEffect vs useLayoutEffect

GSAP

티스토리툴바