React 프로젝트를 진행하다 보면 “전역 상태 관리” 문제가 등장한다. 이때 자주 쓰이는 도구가 React Context API와 Redux이다. 이번 글에서는 두 가지를 비교하고, 사용 목적과 실무 적용 방법까지 구체적으로 다루어본다. 1. React Context APIContext API는 단순 전역 상태를 공유할 때 사용한다. 예를 들어 테마(theme), 로그인 정보, 언어 설정 등, 앱 전반에서 소규모 상태를 공유할 때 적합하다. 특징React 내장 기능이므로 별도 라이브러리 설치가 필요 없다.Provider + useContext 구조로 쉽게 구현 가능하다.상태가 변경되면, 해당 Provider 하위의 모든 컴포넌트가 리렌더링될 수 있어 성능 최적화가 필요하다. (React.memo, us..

리액트에서 사이드 이펙트를 다루기 위해 자주 사용하는 훅이 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!'); };}, ..