코드 땜장이

브라우저는 HTML을 어떻게 화면으로 바꿀까: 렌더링 파이프라인과 성능 포인트 빠른 답 브라우저는 DOM -> CSSOM -> 렌더 트리 -> 레이아웃 -> 페인트 -> 컴포지팅 순서로 화면을 만든다. 크기와 위치를 바꾸면 레이아웃 비용이 커지고, 색상·그림자·배경 변경은 주로 페인트 비용을 만든다. transform과 opacity 중심 애니메이션은 컴포지팅 단계에서 처리돼 더 부드럽게 동작하는 경우가 많다. 성능 문제는 감으로 추측하지 말고 Chrome DevTools의 Performance, Layers, Paint flashing으로 먼저 확인한다. 목차 데이터 흐름과 상태 소유권부터 봐야 하는 이유 브라우저 렌더링 파이프라인을 왜 알아야 할까: 화면은 느린데 API는 빠른 이유 HTML이 픽셀이 되기까지: DOM, CSSOM, 렌더 트리, 레이아웃, 페인트, 컴포지팅 어떤 변경이 어디까지 전파될까: 스타일 계산, 레이아웃, 페인트, 컴포지팅 프런트엔드에서 자주 만드는 안티패턴 성능에 유리한 렌더링 구성 예시: CSS 속성 선택과 숨김 전략 렌더링 타이밍: React 리렌더링과 브라우저 페인트는 다르다 Chrome DevTools로 병목 확인하기 자주 하는 오해와 실무 체크리스트 데이터 흐름과 상태 소유권부터 봐야 하는 이유 브라우저 렌더링 파이프라인은 브라우저가 화면을 그리는 방법을 설명합니다. 하지만 실무에서 성능 문제가 시작되는 지점은 대개 그보다 앞입니다. 어떤 상태가 바뀌었고, 그 상태 변화가 어떤 컴포넌트 재계산과 DOM 변경으로 이어졌는지가 먼저입니다. 브라우저는 갑자기 화면을 느리게 만드는 주체라기보다, 애플리케이션이 만든 결과를 계산하고 그리는 쪽에 가깝습니다. 그래서 프런트엔드 성능은 브라우저 지식만으로는 잘 풀리지 않습니다. 상태를 누가 소유하는지, 변경이 어떤 방향으로 흐르는지, 작은 상호작용이 왜 큰 트리의 리렌더링으로 번지는지를 같이 봐야 합니다. 상태는 한 곳이 소유하고, 아래로 전...

리액트 성능 최적화, 무작정 memo 쓰기 전에 먼저 봐야 할 기준들 빠른 답 느린 원인을 확인하기 전에는 memo부터 늘리지 말고 React DevTools Profiler로 병목을 먼저 찾습니다. 상태를 너무 상위에 두면 하위 전체가 자주 리렌더링되므로, 상태 소유권을 필요한 범위로 최대한 좁힙니다. useMemo와 useCallback은 비용이 큰 계산이나 참조 안정성이 실제로 필요한 경우에만 적용합니다. 초기 로딩이 느리다면 라우트 단위 코드 스플리팅부터 검토하는 편이 체감 성능에 더 직접적입니다. 목차 리액트 앱은 왜 느려질까 성능 최적화의 첫 단계: 상태 소유권 좁히기 React.memo, useMemo, useCallback은 무엇이 다를까 초기 로딩이 느리다면 코드 스플리팅부터 보기 Profiler로 먼저 확인할 것 흔한 안티패턴과 디버깅 포인트 무엇부터 적용하면 좋을까 리액트 앱은 왜 느려질까 리액트 앱이 느려질 때 많은 분이 먼저 memo , useMemo , useCallback 부터 떠올립니다. 하지만 실제 병목은 대개 훅이 부족해서가 아니라, 상태가 너무 위에 있거나, 작은 변화가 너무 넓은 화면에 전파되거나, 리스트 렌더링과 정렬·필터링 같은 계산이 반복되기 때문에 생깁니다. 여기서 먼저 구분할 것이 있습니다. 리액트에서 리렌더링은 정상 동작입니다. 상태나 props 가 바뀌면 다시 렌더링하면서 다음 UI를 계산하는 것이 리액트의 기본 모델입니다. 문제는 그 렌더링 범위가 불필요하게 넓거나, 계산 자체가 무겁거나, 실제 DOM 반영 비용까지 커질 때입니다. 즉, 리렌더링이 있다 와 성능 문제가 있다 는 같은 말이 아닙니다. 성능 최적화의 목표는 리렌더링을 무조건 없애는 것이 아니라, 사용자 행동에 비해 과도한 계산과 전파를 줄이는 것입니다. 성능 최적화의 첫 단계: 상태 소유권 좁히기 프론트엔드에서 가장 먼저 봐야 할 것은 데이터 흐름입니다. 리액트는 부모에서 자식으로 내려가는 단방향 흐름을 가지므로, 어떤 상태...