jonbeo 님의 블로그

React에서 컴포넌트의 상태를 관리하고,특정 시점에 동작을 처리하려면 **Hooks(훅)**를 사용해야 합니다.이번 포스팅에서는 그중에서도 가장 기초이면서 중요한 useState와 useEffect의원리와 활용법을 예제 중심으로 알아보겠습니다! 🔍🧠 1. useState란?useState는 컴포넌트 내에서 **상태(state)**를 생성하고 관리하는 Hook입니다. import { useState } from 'react';const Counter = () => { const [count, setCount] = useState(0); // 상태 생성 return ( setCount(count + 1)}> 클릭 횟수: {count} );}; 구성요소 설명 count현재..

안녕하세요 😊React에서 검색 기능이나 필터링 기능을 만들다 보면, 입력할 때마다 화면이 순간적으로 버벅거리는 경험을 하신 적 있으실 겁니다.특히 데이터가 많거나 무거운 연산을 수행할 경우, 사용자가 타이핑하는 속도를 UI가 따라가지 못해 불편해질 수 있습니다. 이때 React가 제공하는 useDeferredValue Hook을 사용하면 문제를 쉽게 해결할 수 있습니다.📍 1. useDeferredValue란?useDeferredValue는 값 업데이트를 지연 처리하여, 사용자 인터랙션(입력)은 바로 반영되지만 무거운 연산은 조금 늦게 처리되도록 도와주는 Hook입니다.즉, UI 우선 / 연산 지연이라는 전략을 통해 UX를 개선합니다.📍 2. 기본 사용법 import { useState, useD..

안녕하세요 😊Suspense는 로딩 중 상태를 선언적으로 처리할 수 있도록 도와주는 React 기능입니다.두 가지 핵심 사용처는 ① 코드 스플리팅(React.lazy) ② 데이터 로딩 경계 처리입니다.1) 코드 스플리팅 기본 import React, { Suspense } from "react";const Chart = React.lazy(() => import("./Chart"));export default function Dashboard(){ return ( 차트 로딩 중…}> );}2) 데이터 로딩용 리소스 패턴(기초)간단 예시: Promise가 해결될 때까지 읽기를 “멈추는” 래퍼를 만들어 Suspense로 감쌉니다.// resource.jsexport functio..

안녕하세요 😊React에서 일반적으로 부모 → 자식으로 props를 내려주어 동작을 제어합니다.하지만 때때로 부모 컴포넌트가 자식 컴포넌트의 특정 함수나 값에 직접 접근해야 할 때가 있습니다.이럴 때 사용하는 Hook이 **useImperativeHandle**입니다.📍 1. 언제 필요한가?자식 컴포넌트를 외부 API처럼 동작시키고 싶을 때예: 부모에서 자식의 focus(), reset() 같은 메서드를 직접 호출Form, Modal, Canvas 컨트롤 등에서 자주 사용📍 2. 기본 문법useImperativeHandle(ref, createHandle, [deps]);ref: 부모로부터 전달받은 ref 객체createHandle: 부모가 접근할 수 있도록 노출할 속성과 메서드 정의deps: 의존..

안녕하세요 😊React 컴포넌트가 렌더링될 때,값을 계산하는 로직이 복잡하거나 무거우면 매번 연산이 반복되어 성능이 저하될 수 있습니다.이럴 때 useMemo Hook을 사용하면 필요할 때만 연산을 실행하고 결과를 재사용할 수 있습니다.📍 1. useMemo란?메모이제이션(Memoization) 기능을 제공하는 React Hook**의존성(dependencies)**이 변경될 때만 콜백 함수를 다시 실행복잡한 계산, 큰 데이터 변환, 필터링, 정렬 등에 유용문법const memoizedValue = useMemo(() => { // 계산 로직 return 결과값;}, [의존성]);📍 2. 기본 예제import React, { useMemo, useState } from "react";export..

안녕하세요 😊React 프로젝트가 커질수록 초기 로딩 속도가 느려지는 문제를 겪게 됩니다.이럴 때 효과적인 방법이 바로 **코드 스플리팅(Code Splitting)**입니다. React는 기본적으로 import로 컴포넌트를 불러오지만,필요할 때만 해당 컴포넌트를 로드하도록 설정하면 초기 번들 크기를 줄일 수 있습니다.이때 사용하는 것이 **React.lazy()**와 ****입니다.📍 1. React.lazy()란?컴포넌트를 **지연 로딩(Lazy Loading)**하는 함수해당 컴포넌트가 실제로 필요할 때만 로드 → 초기 번들 크기 감소기본 문법const MyComponent = React.lazy(() => import("./MyComponent"));📍 2. Suspense란?lazy로 로드..

안녕하세요 😊React를 사용하다 보면“이 계산은 매번 다시 하지 않아도 되는데…”“렌더링이 되어도 이 값은 유지하고 싶다…”이럴 때 유용한 Hook이 바로 **useMemo**와 **useRef**입니다.이번 글에서는 두 Hook의 차이점과실무에서 어떻게 활용할 수 있는지 예제와 함께 정리해드리겠습니다.📍 1. useMemo – 계산 결과 메모이제이션기본 개념의존성 배열이 변할 때만 함수를 실행하고, 그 외에는 이전 계산값을 재사용 예제import { useMemo, useState } from "react";export default function ProductList({ products }) { const [filter, setFilter] = useState(""); const filte..

안녕하세요 😊이번 글에서는 React 18 이후 도입된 동시성(Concurrency) 관련 Hook인 **useTransition**을 알아보겠습니다.useTransition은 덜 중요한 상태 업데이트를 **비동기 전환(transition)**으로 표시하여, 사용자의 타이핑/클릭 같은 긴급한 인터랙션이 느린 렌더링에 막히지 않도록 도와줍니다.1) useTransition 한 줄 정의긴급도 낮은 업데이트를 “전환”으로 표시해, UI가 끊기지 않게 만드는 Hook반환값: [isPending, startTransition]isPending: 전환 중인지 여부 (로딩 스피너, 로딩 텍스트 등에 활용)startTransition(cb): cb 안의 상태 업데이트를 낮은 우선순위로 실행2) 언제 쓰면 좋은가요?검..

이번 글에서는 React의 성능 최적화 Hook 중 하나인useDeferredValue에 대해 알아보겠습니다.이 Hook은 사용자 입력과 같이 빠르게 바뀌는 값의 **"지연된 버전"**을 만들어UI가 끊기지 않고 부드럽게 렌더링될 수 있도록 도와줍니다.초보자 분들도 이해할 수 있도록 개념부터 사용법, 실전 예제까지 차근차근 설명드릴게요!📍 1. useDeferredValue란?useDeferredValue는바로 반영하지 않고, 브라우저가 여유 있을 때 값 업데이트를 미루는 Hook입니다.주로 입력이 빠르게 바뀌는데, 그걸 기반으로 무거운 연산을 해야 할 때 사용됩니다.예: 검색창에 입력할 때마다 긴 리스트를 필터링해야 한다면→ useDeferredValue로 부하를 줄일 수 있습니다.📍 2. 기본 사..