본문 바로가기

UI

React 앱에서 이미지 필터 효과 적용하기 이미지 톤 보정, 흑백, 블러 같은 효과는 UI 완성도를 즉시 끌어올립니다. React에서는 CSS filter로 가볍게 처리하거나, Canvas로 픽셀 단위 조작과 내보내기까지 구현할 수 있습니다. 이 글은 실무에서 바로 붙일 수 있는 최소 예제와 성능/SEO 팁을 제공합니다.1. CSS filter로 즉시 적용하기 (가볍고 빠름)CSS filter는 GPU 가속이 잘 되고, 레이아웃에 영향을 주지 않아 스크롤/애니메이션에 유리합니다. 슬라이더로 밝기, 대비, 채도, 세피아, 블러를 제어하는 기본 예제입니다.import React, { useMemo, useState } from 'react';export default function CssFilterDemo() { const [params, set.. 더보기
React 앱에서 애니메이션을 위해 Framer Motion 활용하기 Framer Motion은 React에서 선언적이고 직관적인 애니메이션을 제공하는 라이브러리입니다. 컴포넌트 상태와 상호작용을 자연스럽게 연결하고, 레이아웃 변경·마운트/언마운트 전환까지 손쉽게 다룰 수 있습니다. 아래 예제와 패턴을 기준으로 실무에 바로 적용해보세요.1. 설치 및 기본 세팅프로젝트에 Framer Motion을 설치합니다.// npma npm i framer-motion// yarnyarn add framer-motion일반적인 React 환경에서 추가 설정 없이 바로 사용할 수 있습니다. Next.js 등 SSR 환경에서도 기본적으로 호환되며, 무거운 애니메이션 컴포넌트는 동적 로딩을 고려합니다.2. 가장 기본: motion 컴포넌트motion.* 요소에 initial, animate,.. 더보기
React로 드래그 앤 드롭 인터페이스 만들기 React에서 드래그 앤 드롭(Drag and Drop)을 구현하는 방법은 여러 가지가 있지만, 실무에서는 대부분 react-beautiful-dnd 또는 dnd-kit 같은 라이브러리를 사용합니다. 직접 이벤트를 다루는 것보다 훨씬 생산적이고 안정적입니다.1. react-beautiful-dnd 설치와 기본 구조먼저 라이브러리를 설치하세요.npm install react-beautiful-dnd기본 드래그 앤 드롭 인터페이스는 DragDropContext, Droppable, Draggable 세 가지 컴포넌트로 구성됩니다.2. 간단한 Todo 리스트 예제import React, { useState } from 'react';import { DragDropContext, Droppable, Dragga.. 더보기
C# BackgroundWorker로 백그라운드 작업 처리 UI 애플리케이션에서 시간이 걸리는 작업을 메인 스레드에서 실행하면 화면이 멈추는 문제가 발생합니다. BackgroundWorker는 이벤트 기반으로 백그라운드 작업, 진행률 보고, 취소를 간단히 처리할 수 있는 클래스로 WinForms/WPF에서 자주 사용됩니다.1. BackgroundWorker란?BackgroundWorker는 별도의 스레드에서 작업을 수행하고, 안전하게 UI 스레드로 진행률과 완료 결과를 전달합니다. 주요 구성 요소는 다음과 같습니다.- DoWork: 실제 작업을 수행하는 이벤트입니다.- ProgressChanged: 진행률을 UI에 반영하는 이벤트입니다.- RunWorkerCompleted: 작업 완료/취소/오류를 처리하는 이벤트입니다.- WorkerReportsProgress,.. 더보기
React Portal로 모달 컴포넌트 구현하기 모달은 렌더링 위치, 포커스, 스크롤 제어 등에서 까다롭습니다. React Portal을 활용하면 모달을 DOM 트리 바깥의 별도 루트로 렌더링하여 레이아웃/스타일 충돌을 피하고, 접근성 요구사항을 충족하기 쉬워집니다. 실무에서 바로 쓸 수 있는 포털 기반 모달 구현을 정리합니다.1. Portal이 필요한 이유모달, 드롭다운, 토스트처럼 화면 위에 떠야 하는 UI는 부모 컴포넌트의 z-index나 overflow에 영향받기 쉽습니다. Portal은 자식 컴포넌트를 별도의 DOM 노드로 렌더링하여 이러한 제약을 제거합니다. 덕분에 오버레이, 스크롤 잠금, 포커스 트랩 같은 모달의 핵심 요구사항을 안정적으로 구현할 수 있습니다.2. Portal 루트 준비HTML에 모달을 위한 루트 노드(div#modal-r.. 더보기

티스토리툴바