react (12) 썸네일형 리스트형 [React 19] useFormStatus로 더 똑똑한 폼 UI 만들기 들어가며폼을 다루다 보면 로딩 상태 관리가 늘 골치 아프죠?버튼은 비활성화하고, 스피너는 보여주고... 이런 보일러플레이트 코드에 지치셨다면,React 19의 `useFormStatus`가 여러분의 구원자가 될 거예요! 😊 useFormStatus란? 🤔`useFormStatus`는 React의 Form Action과 함께 사용되는 훅으로, 폼의 제출 상태를 자동으로 추적합니다.더 이상 로딩 상태를 수동으로 관리할 필요가 없어요! 기본 사용법 📝```tsximport { useFormStatus } from 'react-dom'; function SubmitButton() { const { pending, data, method } = useFormStatus(); return ( .. [React 19] useOptimistic으로 낙관적 UI 구현하기 - 좋아요 버튼 UX 개선하기 들어가며몇 달 전, React Query로 낙관적 UI를 구현하면서 꽤나 고민했던 기억이 있습니다.그런데 React 19에서 소개된 useOptimistic을 보고 "아, 이거였구나!" 하는 깨달음을 얻었어요.오늘은 제가 겪었던 문제를 React 19의 새로운 훅으로 어떻게 더 우아하게 해결할 수 있는지 이야기해보려 합니다! 😊문제 상황: 느린 좋아요 버튼 🐢인스타그램 스타일의 좋아요 기능을 구현하면서 마주쳤던 문제는 다음과 같았어요:서버 응답을 기다리느라 버튼 반응이 느림 (1-2초)연속 클릭 시 처리가 까다로움사용자 경험이 매끄럽지 않음useOptimistic으로 해결하기 ⚡1. 기본 구현function LikeButton({ postId }: { postId: string }) { const .. [React 19] useActionState로 서버 상태 관리하기 들어가며React 19에서 새롭게 소개된 useActionState는 서버 액션의 상태를 우아하게 관리할 수 있게 해주는 강력한 훅입니다.React Query(TanStack Query)에 익숙하신 분들이라면 더욱 반가우실 것 같네요! 😊useActionState란? 🤔useActionState는 서버 액션의 전체 생명주기를 관리하는 훅으로, 다음과 같은 상태를 제공합니다:pending: 액션 실행 중 여부error: 발생한 에러 정보data: 성공 시 반환된 데이터기본 사용법 📝import { useActionState } from 'react';// 서버 액션 정의async function submitComment(formData: FormData) { 'use server'; const c.. [React 19] useTransition으로 더 부드러운 UI 구현하기 들어가며React 애플리케이션을 개발하다 보면 무거운 작업으로 인해 UI가 버벅이는 경험을 해보셨을 거예요.오늘은 이런 문제를 해결할 수 있는 useTransition 훅에 대해 자세히 알아보겠습니다! 😊useTransition이란? 🤔useTransition은 우선순위가 낮은 상태 업데이트를 표시하는 React 훅입니다.이 훅은 두 가지 값을 반환합니다:isPending: 전환이 진행 중인지 여부startTransition: 우선순위가 낮은 업데이트를 시작하는 함수기본 사용법 📝import { useTransition } from 'react';function SearchComponent() { const [isPending, startTransition] = useTransition(); c.. [JavaScript] 디바운스와 쓰로틀링 구현하고 활용하기 들어가며안녕하세요! 오늘은 프론트엔드 개발자라면 반드시 알아야 할 디바운스(Debounce)와 쓰로틀링(Throttling)에 대해 알아볼게요.스크롤 이벤트나 검색 입력 등에서 성능 최적화가 필요하다면, 이 두 기법은 여러분의 강력한 무기가 될 거예요! 😊디바운스와 쓰로틀링이 필요한 이유먼저, 문제 상황을 한번 볼까요?// 😱 이런 코드는 성능 저하의 지름길입니다!window.addEventListener('scroll', () => { // 스크롤할 때마다 실행되는 무거운 작업 doSomethingHeavy();});// 🤔 검색창에서도 문제가 발생해요searchInput.addEventListener('input', () => { // API 호출이 입력할 때마다 발생! searchAPI.. [JavaScript] axios 인터셉터로 전역 에러 처리하기 들어가며API 요청 시 발생하는 에러를 각 컴포넌트에서 개별적으로 처리하다 보면 코드가 중복되고 관리가 어려워집니다. axios 인터셉터를 활용하면 이러한 에러 처리를 전역적으로 깔끔하게 관리할 수 있습니다.axios 인터셉터 설정하기1. 기본 인스턴스 생성// src/api/axios.tsimport axios from 'axios';export const instance = axios.create({ baseURL: process.env.REACT_APP_API_URL, timeout: 5000, headers: { 'Content-Type': 'application/json', },});2. 요청(Request) 인터셉터instance.interceptors.request.use( (.. [React] 렌더링 최적화하기 - React.memo 현명하게 사용하기 들어가며React 애플리케이션에서 불필요한 리렌더링은 성능 저하의 주요 원인입니다. React.memo는 이러한 문제를 해결할 수 있는 강력한 도구지만, 무분별한 사용은 오히려 성능을 저하시킬 수 있습니다. 언제, 어떻게 React.memo를 사용해야 할지 알아보겠습니다.React.memo가 필요한 이유// 부모 컴포넌트가 리렌더링될 때마다 자식 컴포넌트도 불필요하게 리렌더링됩니다const ParentComponent = () => { const [count, setCount] = useState(0); return ( setCount(count + 1)}> Count: {count} );};React.memo 기본 사용법1. 간단한 사용 .. [React] 웹 페이지 복귀, 이탈 탐지 (가시성) 웹 페이지 복귀와 이탈 이벤트 설정 방법 배경 React 프로젝트를 하던 중 웹 페이지 이탈과 복귀 시점에 특정 작업을 수행해야하는 상황이 있었다. 해결 방법 웹 페이지 이탈, 복귀에 대한 이벤트는 `window`객체에 내장된 `visibilityState`를 활용하여 구현할 수 있다. React 프로젝트에서는 `useEffect` Hook을 사용해서 컴포넌트 생명 주기에 따른 이벤트 처리가 필요하다. 자세한 방법은 다음과 같다. useEffect(() => { function handleVisibilityChange() { // 페이지 복귀 if (document.visibilityState === 'visible') { console.log('복귀'); } // 페이지 이탈 if (document.v.. React 앱을 Vite + gh-pages로 빌드 및 배포하기 요즘 속도가 빠르고 가벼운 느낌이 드는 Vite를 프로젝트에 자주 활용한다. 그러던 중 간단한 프로젝트를 gh-pages를 이용하여 배포하려고 했는데 여러 난관이 있었다. 이번 일을 계기로 Vite로 생성한 react.js 프로젝트를 gh-pages 위에 배포하는 방법을 정리하였다. 배포 환경 yarn, react, vite, gh-pages 배포 방법 1. gh-pages 라이브러리 설치 yarn add gh-pages 2. 파일 설정 vite.config.js base 추가 import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; export default defineConfig({ base: '/repo-name',.. [React] ReferenceError: Buffer is not defined Web(React)에서 MQTT 개발 시 발생하는 Buffer 레퍼런스 에러 해결 방법 문제 발생 React 웹 앱에서 MQTT 통신을 구현하기 위해 mqtt 라이브러리를 사용하였다. 그런데 다음과 같은 레퍼런스 에러가 발생했다. 해결 방법 다음과 같이 mqtt 라이브러리를 import하는 코드를 수정한다. // Before import mqtt from "mqtt"; // After import mqtt from "mqtt/dist/mqtt" 만약 TypeScript 환경에서 프로젝트를 개발 중이라면 다음과 같은 내용의 mqtt.d.ts 파일을 생성한다. // mqtt.d.ts declare module "mqtt/dist/mqtt" { import MQTT from "mqtt" export = MQT.. 이전 1 2 다음
