소개Zustand는 React의 상태 관리를 간단하고 효율적으로 할 수 있게 도와주는 경량 상태 관리 라이브러리입니다.Redux보다 보일러플레이트 코드가 적고, 사용법이 직관적이며 Hooks 기반으로 동작합니다. 특징1. 간단한 사용법: React Hooks 스타일로 상태를 관리합니다.2. 가벼운 라이브러리: 약 1KB로 매우 가볍습니다.3. 보일러플레이트 최소화: 리듀서, 액션 정의 등이 필요 없습니다.4. 직관적: 상태 정의 및 사용이 단순하고 명확합니다.5. React에 최적화: React에서 사용하기 편리합니다. 설치npm install zustand 기본 사용법1. 상태 스토어 생성Zustand는 create 함수를 사용해 상태 스토어를 정의합니다.예시: store/CounterStore.ts..
라이브러리
아이템 우측 하단에 원을 클릭 시 해당 원의 크기가 커지며 화면을 덮는 애니메이션을 구현하였습니다.import { motion } from "framer-motion";import React, { useState } from "react";import styled from "styled-components";const Item = () => { // 원 클릭 여부 state const [isClick, setIsClick] = useState(null); return ( // 아이템 {/** * 아이템 우측 하단 원 * 클릭 시 isClick 상태가 변경된다. * animate는 isClick이 true일 경우 애니메이션 객체를 전달하도록 설정..
문제height가 100vh인 컴포넌트를 여러개 렌더링하여 onViewportEnter로 뷰포트 감지를 하였는데 마운트 시에 한 개만 뷰포트에 감지되는 것이 아닌 두 개의 컴포넌트가 뷰포트에 감지됨으로써 뷰포트에 감지되었을 때 애니메이션을 작동하려는 의도와는 다르게 코드가 동작함 해결방안react-intersection-observer 라이브러리를 사용하여 뷰포트 진입을 보다 정확하게 감지하여 해결했다.간단히 요약하자면 해당 라이브러리를 사용해 컴포넌트가 뷰포트 50%이상 진입 시 뷰포트 감지로 간주하여 문제를 해결했다 초기 렌더링 시 0번째와 1번째 페이지의 애니메이션이 모두 실행되는 이유는, 두 컴포넌트가 뷰포트에 동시에 노출되기 때문일 수 있습니다. 특히, 스크롤 스냅이 적용된 경우 뷰포트의 크기..
import React from 'react';import { motion, useAnimation } from 'framer-motion';const items = ['아이템 1', '아이템 2', '아이템 3', '아이템 4'];const ListComponent = () => { const handleViewportEnter = (index) => { console.log(`컴포넌트 ${index + 1}가 뷰에 노출되었습니다.`); }; return ( {items.map((item, index) => ( handleViewportEnter(index)} > {item} ))} );};export..
import React, { useState, useEffect } from 'react';import { motion } from 'framer-motion';const ConditionalAnimationComponent = () => { const [isVisible, setIsVisible] = useState(false); return ( {isVisible ? '애니메이션 실행' : '애니메이션 대기 중'} );};export default ConditionalAnimationComponent;
// 슬롯텍스트 모션 컴포넌트const SlotTextMotion = () => { // 슬롯에 표시될 문자열을 담은 배열 const majorArray = [1,2,3,4,5,6,7,8,9,10]; // 현재 보여지고 있는 슬롯의 인덱스를 나타내는 상태 변수 const initNum=Math.floor(Math.random() * majorArray.length); const [currentIndex, setCurrentIndex] = useState(initNum); const [index,setIndex]=useState(1);// // 애니메이션이 완료되면 호출되는 함수 const onAnimationComplete = async () => { const randNum = M..
https://www.framer.com/motion/use-in-view/ useInView | Framer for DevelopersA simple state hook for when an element is within the viewport.www.framer.com https://velog.io/@flashclub/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%8A%A4%ED%81%AC%EB%A1%A4%EC%97%90-%EB%94%B0%EB%A5%B8-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%EA%B5%AC%ED%98%84-feat.-framer-motion 리액트 스크롤에 따른 애니메이션 구현 (feat. framer-motion)frame..
