본문 바로가기

React51

[React] useRef로 리렌더링 없는 변수 저장하기 (setInterval 예제) 안녕하세요. 오늘은 useRef를 컴포넌트의 리렌더링(re-rendering)을 유발하지 않는 값 저장소로 활용하는 예제를 만들어 보겠습니다. useRef useState와 useRef는 둘 다 무언가를 '기억'하지만, 그 성격이 완전히 다릅니다. 이 차이를 setInterval 타이머 예제로 확실하게 알아보겠습니다. useState값이 바뀌면 ( setCount(1) ) 즉시 리렌더링이 예약됩니다.UI에 보여야 하는 값을 저장합니다.useRefmyRef.current = '...' 처럼 값을 바꿔도, React는 전혀 신경 쓰지 않습니다. (리렌더링 X) UI와는 상관없는 내부 관리용 값을 저장할 때 씁니다. 예제 - setInterval 타이머 만들기화면에 보이는 초(second): 0, 1, .. 2025. 10. 26.
[React] useRef로 페이지 로딩 시 input에 자동 포커스(focus) 주기 안녕하세요. React로 폼(Form)을 만들다 보면, 사용자가 페이지에 접속했을 때 아이디(ID) 입력창이나 검색창에 바로 타이핑할 수 있도록 자동으로 포커스를 맞춰주고 싶을 때가 많습니다. HTML에서는 속성으로 간단하게 구현할 수 있지만, React에서는 컴포넌트의 생명주기와 DOM 접근을 관리해야 하므로 useRef 훅을 사용하는 것이 표준적인 방법입니다. 오늘은 useRef와 useEffect를 조합해 페이지 로드 시 input에 자동으로 포커스를 주는 간단한 예제를 알아보겠습니다. 예제컴포넌트가 처음 화면에 나타났을 때 '아이디' input에 자동으로 포커스가 이동하는 예제 코드입니다import React, { useRef, useEffect } from 'react';import '... 2025. 10. 23.
[React] 바깥 클릭 시 닫히는 드롭다운 (useOnClickOutside 훅) 1. use On Click Outside - “바깥 클릭 시 닫기” 로직에 대한 커스텀 훅을 따로 만들어줍니다. - ref 영역 밖을 누르면 handler를 호출하는 로직입니다. - 이렇게 개별적으로 분리해놓으면 여러 컴포넌트에서 사용할 수 있습니다. import { useEffect } from "react";/** ref 영역 밖을 클릭/터치하면 handler 실행 */export default function useOnClickOutside(ref, handler) { useEffect(() => { const onPointerDown = (e) => { const el = ref?.current; if (!el || el.contains(e.target)) return;.. 2025. 9. 3.
[React] Tailwind v4로 웹페이지 다크모드 설정하기 (클래스 기반) 안녕하세요 오늘은 웹페이지에 다크 모드 적용하는 방법에 대해 포스팅하겠습니다. 사용자들이 눈 건강을 위해 페이지 배경색을 어두운색(검정색)으로 변경하는 기능을 의미합니다. 본 게시글에서는 사용자가 직접 다크 모드를 on, off 할 수 있는 버튼을 제공해보도록 하겠습니다. 환경: React + Vite, Tailwind v4 (config-free). 1. Tailwind v4에서 클래스 기반 다크모드 켜기 - index.css - v3처럼 tailwind.config.js의 darkMode: 'class'를 쓰지 않고, v4는 @custom-variant로 선언할 수 있습니다. @import "tailwindcss";/* v4: .dark 클래스 기반 다크 모드 활성화 */@custom-varia.. 2025. 9. 2.
[React] navigator.share + clipboard로 공유 버튼 간단 구현하기 안녕하세요 오늘은 React 프로젝트 카드나 블로그 게시글 리스트에 간단한 공유 버튼(공유 or 복사) 을 추가하는 방법을 소개해보려고 합니다. 공유 버튼 사용 이유 블로그 글이나 포트폴리오 프로젝트는 결국 누군가에게 보여주려고 작성하는 글입니다. 링크를 쉽게 공유할 수 있는 버튼 하나만 달아줘도 독자 입장에서는 주소창 열어서 복사/붙여넣기 하는 수고를 덜 수 있습니다. 작은 디테일이지만 체감 UX가 확 달라집니다 요즘은 모바일에서 글을 보는 경우가 많습니다. 주소창 열어서 링크 복사하기는 은근 번거로운데, 공유 버튼을 누르면 바로 카톡/메일/sns 로 바로 보낼 수 있습니다. 네이티브 공유 시트가 뜨기 때문에 “이거 공유해야겠다” 싶은 순간 바로 행동으로 이어집니다. 모바일: 네이티브 공유 시트(n.. 2025. 8. 25.
[React] LottieFiles 애니메이션 적용하기 안녕하세요 오늘은 lottie 애니메이션을 적용해보도록 하겠습니다Lottie란?Lottie는 애니메이션 파일 형식(JSON) + 재생 라이브러리를 의미합니다. 원래는 After Effects(영상 툴)에서 만든 애니메이션을, Bodymovin 플러그인으로 “벡터 기반 JSON 데이터”로 추출한 게 시작이었으며 JSON에는 위치, 크기, 색, 모양, 타이밍 같은 애니메이션 정보가 다 들어 있습니다. 그래서 GIF처럼 무거운 픽셀 덩어리가 아니라, 벡터/수학적 계산 기반으로 움직이는 거라 용량이 적다는 장점이 있습니다. Lottie를 쓰는 이유 가벼움 → GIF보다 용량이 훨씬 작고, 확대해도 깨지지 않습니다.제어 가능 → 단순히 자동 재생만 되는 게 아니라, 재생/정지, 구간 반복, 속도 조절까지 가능합니.. 2025. 8. 21.
[React] 3D 아바타 컴포넌트 만들기 안녕하세요 오늘은 React + Three.js 기반의 3D 아바타 컴포넌트 예제를 만들어보겠습니다. 우선 3D 렌더링 라이브러리를 필수로 설치해야합니다 1. 관련 라이브러리 설치 - 이 예제는 TailwindCSS로 스타일링 돼있으니 Tailwind도 같이 세팅해줍니다. npm install @react-three/fiber @react-three/drei threenpm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p react-three-fiber: https://docs.pmnd.rs/react-three-fiber@react-three/drei: https://github.com/pmndrs/dreiThree.js: .. 2025. 8. 11.
[React] 웹페이지 메뉴바 드롭다운 만들기 안녕하세요 오늘은 웹페이지 상단에 위치한 메뉴바에 드롭다운으로 세부 메뉴 목록을 구성해보도록 하겠습니다. 드롭다운 메뉴는 카테고리가 많을때 사용자가 쉽게 원하는 목록을 찾을 수 있도록 합니다. 드롭다운 메뉴의 주요 목적들: 1. 공간 효율성네비게이션 바의 공간이 제한적일 때많은 메뉴 항목을 한 줄에 모두 표시하기 어려울 때2. 정보 구조화관련된 메뉴들을 카테고리별로 그룹화사용자가 원하는 정보를 더 쉽게 찾을 수 있게 함3. 사용자 경험(UX) 개선복잡한 메뉴 구조를 단순화시각적 혼란을 줄이고 직관적인 네비게이션 제공실제 사례들:쇼핑몰: "남성의류" → "상의", "하의", "신발" 등기업 사이트: "제품" → "소프트웨어", "하드웨어", "서비스" 등포트폴리오: "프로젝트" → "웹개발", "모바일.. 2025. 8. 6.
[React] 웹페이지에 간단하게 폭죽 효과 구현하기 안녕하세요 오늘은 canvas-confetti 라이브러리 사용하여 간단하게 폭죽 효과를 구현해보도록 하겠습니다. 아래는 라이브러리 깃허브 링크입니다. GitHub - catdad/canvas-confetti: 🎉 performant confetti animation in the browser🎉 performant confetti animation in the browser. Contribute to catdad/canvas-confetti development by creating an account on GitHub.github.com 코드 한두줄만으로 폭죽 이벤트를 구현할 수 있으며 canvas-confetti 라이브러리의 npm 주간 다운로드율은 92 k 로 활발하게 사용되고 있는 라이브러리.. 2025. 8. 5.

티스토리툴바