리액트에서 사이드 이펙트를 다루기 위해 자주 사용하는 훅이 useEffect와 useLayoutEffect이다. 둘 다 컴포넌트가 마운트된 후 동작하지만, 실행 시점과 사용 목적이 다르다. 1. 기본 개념훅실행 시점특징주로 사용하는 상황useEffect화면 렌더링 후비동기적으로 실행데이터 요청, 구독, 이벤트 등록 등, 화면 깜빡임이 크게 문제되지 않는 작업useLayoutEffect화면 렌더링 직전동기적으로 실행DOM 측정, 레이아웃 조정 등, 화면이 그려지기 전에 처리해야 하는 작업 핵심 포인트둘 다 마운트 후 동작하지만, useLayoutEffect는 화면 그리기 전에 실행되어 레이아웃을 수정해도 깜빡임이 발생하지 않음.useEffect는 화면 렌더링 이후 실행되므로, 화면이 먼저 그려지고 나서 사..

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)를 저장해두었다가 의존성이 바뀌지 않으면 재계산을 생략한다.즉, 성능 향상의 핵심은 “불필요한 연산을 줄이는..