본문 바로가기

React51

[React] GSAP ScrollTrigger 라이브러리 사용해 스크롤에 반응하는 애니메이션 구현하기 안녕하세요 오늘은 GSAP ScrollTrigger 라이브러리를 활용하여 사용자의 스크롤에 따라 컴포넌트에 애니메이션을 추가해보도록 하겠습니다. https://gsap.com/docs/v3/Plugins/ScrollTrigger GSAP ScrollTrigger 은 "스크롤 위치에 맞춰 애니메이션을 재생·스크럽·핀·스냅까지 제어” 해 주는 GSAP 플러그인입니다. 먼저 components 디렉토리 내부에 (디렉토리가 없다면 "프로젝트 루트/src" 안에 만들어줍니다) FadeInSection.jsx 파일을 만들어줍니다. 1. FadeInSection.jsximport { useRef } from "react";import gsap from "gsap";import { ScrollTrigger .. 2025. 8. 4.
[React] react-hot-toast 사용하여 토스트 알림 UI 간편하게 만들기 안녕하세요 오늘은 react-hot-toast 라이브러리를 사용해 간단하고 예쁘게 토스트 메시지(알림) ui 를 구현해보겠습니다. 토스트 메시지(Toast message) 란 사용자에게 짧고 간결한 피드백을 제공하기 위해 사용되는 팝업 알림으로, 일정 시간이 지나면 자동으로 사라지며 사용자의 상호작용 없이 정보를 전달하는 데에 사용 되는 요소 입니다. 1. react-hot-toast 설치 프로젝트의 루트 디렉토리 위치에서 해당 라이브러리를 설치해줍니다. npm install react-hot-toast 2. 원하는 자바스크립트 파일에 react-hot-toast 를 import 해줍니다 About.jsximport { toast } from 'react-hot-toast'; 3. 토스트 메시.. 2025. 7. 30.
[React] react-simple-typewriter로 타이핑 효과 쉽게 구현하기 안녕하세요 오늘은 리액트의 react-simple-typewriter 컴포넌트를 사용해 텍스트가 자동 타이핑 되는 효과를 구현해보도록 하겠습니다 아래 react-simple-typewriter 홈페이지에서 자세한 정보를 확인할 수 있습니다. react-simple-typewriterA simple react component for adding a nice typewriter effect to your project.. Latest version: 5.0.1, last published: 3 years ago. Start using react-simple-typewriter in your project by running `npm i react-simple-typewriter`. There are .. 2025. 7. 29.
[React] IntersectionObserver로 스크롤 시 Fade-in 애니메이션 적용하기 안녕하세요 오늘은 React에서 IntersectionObserver API를 활용해 특정 컴포넌트가 화면에 진입할 때 부드럽게 나타나는 효과를 구현해보겠습니다. React에서 scroll 이벤트 없이 간단하게 등장 애니메이션을 만드는 예제입니다. IntersectionObserver란?보통 스크롤에 반응하는 UI를 만들 때 scroll 이벤트를 사용하지만,이 방법은 성능 저하, 여러 컴포넌트 관리의 복잡성 등의 문제가 생길 수 있습니다.이런 문제를 해결해주는 게 바로 IntersectionObserver입니다."요소가 뷰포트에 들어왔는지"를 관찰해서 이벤트 없이도 실행을 제어할 수 있는 브라우저 API입니다. 먼저 FadeInSection 컴포넌트를 만들어줍니다. 1. FadeInSection.j.. 2025. 7. 28.
[React] 홈페이지 메인화면에 배경 영상 추가하기 안녕하세요 오늘은 웹 페이지에 동영상을 추가해보도록 하겠습니다. 무료 동영상 다운로드는 아래 홈페이지에서 가능합니다 ( 고해상도 자연, 도시, 인트로 영상 다수 보유) Pexels - https://www.pexels.com 1. public 폴더 안에 videos 폴더를 만들어줍니다. public 폴더 - 정적 파일(이미지, 영상, 글꼴 등)을 넣는 곳- 접근방식: public/ 안에 넣은 파일은 컴파일 없이 그대로 URL로 접근됨 ex) (/videos/intro.mp4)- 사용 목적: 번들러(Webpack, Vite 등)가 가공하면 경로 꼬이거나 크기 최적화될 수 있으니까, 가공하지 않고 "그대로 쓰는 리소스"는 여기에 넣는 것Pexels 에서 다운 받은 영상을 videos 폴더에 넣어줍니다 .. 2025. 7. 26.
[React] Tailwind CSS와 useState를 활용한 간단한 계산기 구현 안녕하세요 오늘은 React의 useState 훅과 Tailwind CSS를 활용하여 간단한 계산기를 만들어 보는 예제를 함께 살펴보겠습니다.계산기 예제는 매우 간단하지만 프론트엔드 개발의 핵심인 상태 관리, 이벤트 처리, 그리고 UI 구성을 매우 효과적으로 배우고 이해할 수 있는 좋은 예제입니다.( React 프로젝트 환경: vite ) 1. 상태 관리 및 로직 - 계산기의 핵심 기능과 내부 데이터를 관리합니다. - useState 훅: React에서 컴포넌트의 상태(데이터)를 관리하기 위해 사용하는 훅입니다.- handleNumber(num) 함수: 숫자 버튼(0-9, .)이 클릭되었을 때 호출됩니다.- handleOperator(op) 함수: 연산자 버튼(+, -, *, /)이 클릭되었을 때 호.. 2025. 7. 24.
[React] Tailwind CSS 라이브러리 사용해 페이지네이션 구현하기 안녕하세요 오늘은 Tailwind CSS 라이브러리를 사용해 페이지네이션을 구현해보도록 하겠습니다. Tailwind CSS 라이브러리 "유틸리티-퍼스트(utility-first)" CSS 프레임워크" 입니다. 여기서 "라이브러리"라는 표현도 쓰이지만, 정확히는 CSS 프레임워크라고 부르는 것이 더 적절합니다. - 기존 CSS 프레임워크 (예: Bootstrap)와의 차이점 Bootstrap: 미리 정의된 컴포넌트(버튼, 카드, 내비게이션 바 등)를 제공하고, 해당 컴포넌트에 btn, card, navbar와 같은 클래스를 부여하여 사용합니다. 디자인이 정해져 있어서 빠르게 만들 수 있지만, 커스터마이징하려면 복잡한 CSS 오버라이딩이 필요할 때가 많습니다.Tailwind CSS: btn이나 card .. 2025. 7. 24.
[React] Motion 라이브러리 사용하여 스크롤 진행바 (scrollYProgress 사용) 애니메이션 구현하기 안녕하세요 오늘은 리액트의 가장 유명한 애니메이션 라이브러리 중 하나인 Motion (구 Framer Motion) 을 사용하여 애니메이션을 구현해보도록 하겠습니다. 블로그나 기사를 볼때 전체 분량 중 얼마나 읽고 있는지 progress bar (스크롤 진행바)로 확인하는 기능을 애니메이션으로 구현해보겠습니다. 1. Motion 설치하기먼저 리액트 라이브러리에 Motion 을 설치합니다. Get started with Motion for React | Motion for React (prev Framer Motion)Learn Motion for React animation library: Install, animate HTML and SVG elements with spring animation.. 2025. 7. 17.
[React] Three Fiber 로 3D 효과 만들기 안녕하세요 오늘은 WebGL 기반 3D 그래픽 라이브러리인 three 를 사용해 3D 효과를 구현해보도록 하겠습니다. 먼저 three 는 WebGL 기반의 3D 그래픽 라이브러리 입니다. 브라우저에서 3D 그래픽을 구현할 수 있도록 도와주는 자바스크립트 라이브러리로,기본적으로 WebGL API를 추상화하여 훨씬 쉽게 3D 씬, 모델, 애니메이션 등을 구현할 수 있게 해줍니다. Thress.js 를 리액트 환경에서 사용하기 위해서는 React 랜더러인 "React Three Fiber" 를 설치해주어야 합니다. react-three-fiber 는 React의 컴포넌트 기반 철학을 유지하면서 3D 그래픽을 구성할 수 있도록 해주는 React 렌더러입니다. 1. react-three-fiber 설치하기 .. 2025. 7. 16.

티스토리툴바