React를 사용하다 보면 한 번쯤은 듣게 되는 말이 있다. “이건 상태 컴포넌트(stateful), 저건 비상태 컴포넌트(stateless)야.”간단히, 상태 컴포넌트란 상태를 소유 및 관리하는 컴포넌트 그리고 비상태 컴포넌트는 상태를 전달받아 보여주는 컴포넌트 이다. 하지만 Hooks가 도입된 이후 이 구분은 점점 모호해졌다. 나 또한 현업에서 이 워딩을 자주 사용하지는 않았었다. 다만, 리액트 프로젝트를 진행할 때, 컴포넌트들 간의 종속 관계(레벨)와 비즈니스 로직에 따른 최적의 상태 관리를 위한 아키텍처(상태 또는 비상태 컴포넌트로 이뤄진)를 만들기 위해 노력하며 구현을 해왔던 것 같다. 한번은 이 개념을 정확히 짚고 넘어갈 필요가 있다고 생각하여, 이 글에서는 React의 상태(state)를 중..

리액트(React)에서 시간이 오래 걸리는 작업은 대부분 비동기 처리(asynchronous processing)와 관련된다. 리액트는 UI를 빠르게 반응시키는 것이 핵심이기 때문에, 무거운 작업이 메인 스레드를(blocking) 막지 않도록 비동기 처리나 별도 스레드로 분리해야 한다. 1. 비동기로 처리하는 이유리액트는 기본적으로 싱글 스레드(Single Thread) 환경에서 동작한다. 즉, UI 렌더링과 자바스크립트 실행이 같은 스레드에서 처리된다. 따라서, 아래 작업이 동기적으로 실행되면 화면이 멈추거나 클릭이 먹지 않는 UI 프리징(freezing) 현상이 발생한다.무거운 연산: 대용량 데이터 계산, 복잡한 정렬 등네트워크 요청: API 호출파일 입출력: 이미지 업로드 등그래서 이런 작업은 비동..

React를 배우다 보면 이런 상황을 한 번쯤 마주하게 된다.“DOM 요소나 값을 직접 참조할 수도 있는데, 왜 굳이 useRef를 써야 할까?” 이 질문은 단순히 문법의 문제가 아니라, React의 렌더링 메커니즘과 상태 관리 철학을 이해하느냐의 문제이다.이번 글에서는 React 렌더링 구조와 상태 관리의 관점에서 이 이유를 자세히 알아본다. 1. React는 ‘UI = state의 함수’ 구조다. React의 핵심 원칙은 다음과 같다.“UI는 상태(state)의 결과물이다.” 즉, 컴포넌트는 상태가 변할 때마다 다시 렌더링되어야 최신 UI를 보여줄 수 있다.그런데 만약 React의 상태 관리 시스템 밖에서 직접 DOM을 건드리거나, 일반 변수를 수정한다면 어떻게 될까? React는 그 변화를 인지하지..

1. Cleanup 함수의 기본 역할React를 다루다 보면 useEffect 내부에 return으로 전달하는 cleanup 함수(clean-up function)를 자주 보게 된다. cleanup 함수는 컴포넌트가 언마운트되거나, 의존성 배열(dependency array)에 변화가 생길 때 이전 이펙트를 정리하기 위해 동작한다. 이를 통해 메모리 누수나 불필요한 이벤트 리스너 잔존 문제를 방지한다.useEffect(() => { const id = setInterval(() => { console.log('tick'); }, 1000); // cleanup 함수 return () => { clearInterval(id); console.log('cleanup!'); };}, ..

React에는 useMemo, useCallback, React.memo, useRef, useTransition 등 다양한 메모이제이션 훅이 존재한다.하지만 이 훅들은 “성능을 무조건 좋게 하는 마법 도구”가 아니라, 비용이 있는 캐싱 메커니즘이다. 즉, 잘못 쓰면 오히려 성능과 가독성, 유지보수성을 모두 해치는 결과를 초래한다. 이 글에서는 React의 주요 메모이제이션 훅들을 비교하고, “언제 써야 하는지, 왜 남용하면 느려지는지”를 정리해본다. 1. 메모이제이션의 본질Memoization = 캐싱(Caching) + 의존성 추적React의 메모이제이션 훅은 이전 렌더 결과(값, 함수, UI)를 저장해두었다가 의존성이 바뀌지 않으면 재계산을 생략한다.즉, 성능 향상의 핵심은 “불필요한 연산을 줄이는..

웹 성능을 제대로 이해하고 개선하려면 핵심 지표(Core Web Vitals)를 먼저 알아야 한다. Google에서 정의한 Core Web Vitals는 사용자가 실제로 느끼는 웹 경험을 정량적으로 측정할 수 있도록 설계되었다. 여기서는 FCP, LCP, CLS, TTI의 의미와 측정 방법, 그리고 실무에서 개선할 수 있는 전략을 자세히 살펴본다. 1. FCP (First Contentful Paint)FCP는 사용자 화면에 처음으로 텍스트, 이미지, SVG 등 콘텐츠 요소가 렌더링되는 시점을 의미한다. 즉, 브라우저가 빈 화면에서 벗어나 “사이트가 살아 있다”는 신호를 주는 순간이다.권장 기준: 1.8초 이하중요성: 사용자는 화면에 무언가 뜨기를 기대하며, 이를 통해 첫인상이 결정된다.예시: 사용자가 ..