## 이미지를 압축하고 최적화하기

웹페이지가 느린 가장 큰 이유는 크기가 큰 이미지입니다. 웹P, AVIF와 같은 최신 포맷을 활용하고, 업로드 전에 TinyPNG나 Squoosh로 이미지 압축하세요. 아래처럼 이미지를 lazy load하면 더욱 효율적입니다.

```html
<img src=hero.webp loading=lazy width=800 height=600 alt=Hero Image />
```

## 불필요한 CSS 없애기

CSS 프레임워크 사용 시 안 쓰는 코드가 쌓이면 렌더링이 느려져요. PurgeCSS나 Tailwind의 purge 기능, CSS 트리 셰이킹을 활용해 사용하지 않는 스타일을 지워줍니다. 페이지별로 CSS 분리하면 더 효과적입니다.

```javascript
// tai

웹사이트의 빠른 성능을 위해 이미지를 압축하고 불필요한 CSS 및 JS를 줄여야 합니다.
- 이미지 최적화, 지연 로딩, SVG 활용 등으로 리소스 크기를 효과적으로 줄일 수 있습니다.
- 코드 최소화, 코드 분할, CDN 및 캐시 등으로 로딩 속도를 높일 수 있습니다.
- 실제 사용자 성능 데이터를 측정하고 꾸준히 개선하는 것이 중요합니다.

2025년을 위한 프런트엔드 성능 최적화 핵심 노하우

brilliant

## useState -- 꼭 필요한 기본 훅

함수형 컴포넌트에서 상태를 쉽게 관리하려면 useState가 최고입니다. 복잡하게 고민할 필요 없이, 한 컴포넌트의 값을 바꾸는 데 직관적이고 안전하죠. 단, 너무 많은 상태를 한 컴포넌트에 몰아넣기보다는 필요한 만큼 쪼개서 사용하는 게 좋습니다.

```javascript
const [count, setCount] = useState(0);
```

## useEffect -- 사이드 이펙트 관리자

API 호출, DOM 조작, 이벤트 구독 등 컴포넌트의 부수작용은 useEffect가 담당합니다. 잘 쓰면 파워풀하지만, 남발하면 성능 저하와 관리 문제를 일으킬 수 있어요. 상태 동기화를 남용하지 말고, 정말 필요한 경우에만 사용하세요.

```javascri

React에서 기본 훅 7가지를 올바르게 활용하는 것이 실력과 코드 품질을 좌우합니다.
- useState, useEffect, useContext 등 각 훅의 목적과 핵심 사용법을 설명합니다.
- 상태 관리, 성능 최적화, 데이터 전달 등 효율적인 컴포넌트 작업 방법을 안내합니다.
- 커스텀 훅보다 기본 훅 숙지가 더 중요하다고 강조합니다.

2025년을 위한 프런트엔드 성능 최적화 핵심 노하우

매일 쓰는 핵심 React Hooks 7가지