jonbeo 님의 블로그

리액트는 상태가 변경되면 관련된 컴포넌트를 다시 렌더링하는 방식으로 동작합니다.하지만 이 과정에서 필요 없는 컴포넌트까지 렌더링되면 성능 저하로 이어지죠.이를 방지하기 위해 메모이제이션(Memoization) 기법을 활용합니다.🧠 1. React.memo컴포넌트 자체를 메모이제이션하여 불필요한 리렌더링 방지 import React from "react";const Child = React.memo(({ value }) => { console.log("렌더링됨:", value); return {value};});export default Child;props가 바뀌지 않으면 다시 렌더링하지 않음PureComponent와 비슷한 개념📌 주의: props가 객체/배열일 경우 참조가 바뀌면 여전히 리렌더..

웹사이트 속도가 느리면 사용자는 이탈하고, 검색엔진 노출 순위도 하락합니다.특히 모바일 환경에서는 1초의 속도 차이도 매우 치명적이죠.이번 포스팅에서는 프론트엔드 실무 기준으로 가장 많이 적용하는 성능 최적화 방법 10가지를 정리했습니다.🧠 1. 이미지 최적화방법설명✅ WebP, AVIF 사용JPEG, PNG보다 30~80% 더 가볍고 품질 유지✅ 이미지 리사이징실제 사용하는 사이즈만 업로드 (원본 X)✅ Lazy Loading아래에 있는 이미지들은 스크롤 시 로딩 (예: loading="lazy")✅ SVG 적극 활용아이콘, 로고는 SVG로! 🔧 2. CSS 최적화방법설명✅ CSS 파일 합치기불필요한 다중 요청 방지✅ Unused CSS 제거사용하지 않는 클래스를 제거 (PurgeCSS, Tailw..

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