2025/03/18 3

이 작은 차이가 성능을 바꾼다! key={index} vs key={id}

🔍 key={index} vs key={id} 차이점 & 성능 최적화 이유React에서 리스트를 렌더링할 때 각 항목을 구별할 수 있도록 key 속성을 제공해야 합니다.잘못된 key 설정은 불필요한 리렌더링을 유발하고 성능을 저하시킬 수 있습니다.이번 포스팅에서는 key={index}와 key={id}의 차이점을 설명하고, 최적의 방법을 알아보겠습니다.🚨 key={index}의 문제점{data.map((item, index) => ( ))}✔️ index를 key로 사용하면 배열 순서가 바뀔 때 React가 항목을 잘못 인식할 가능성이 큽니다.📌 문제 발생 시나리오1️⃣ 새로운 항목이 리스트 중간에 삽입될 때기존 리스트: [A, B, C]새로운 리스트: [A, NEW, B, C]React는 i..

React 2025.03.18

React 18 + TypeScript + React Query + Hooks 실무 적용기

1. 들어가며최근 프로젝트에서 React 18과 React Query를 활용하여 서버 상태 관리 최적화를 진행했습니다.기존 방식에서는 불필요한 API 요청이 많아 성능 문제가 있었고, 이를 React Query로 개선하면서 어떤 점이 효과적이었는지 공유하려 합니다.특히,✅ React 18의 자동 배치(Auto Batching) 기능이 성능에 미친 영향✅ React Query를 활용한 API 요청 최적화✅ 불필요한 리렌더링을 줄이기 위한 전략에 대해 다룰 예정입니다.2. 실무에서 적용한 핵심 기술2.1 React 18 – 자동 배치(Auto Batching)React 18에서는 여러 개의 setState가 자동으로 하나의 렌더링으로 합쳐지는 자동 배치(Auto Batching) 기능이 도입되었습니다.📌 ..

React 2025.03.18

React 18에서 효율적인 컴포넌트 설계란?

1. 프로젝트 개요프론트엔드를 담당하면서 React 18, TypeScript, React Query, Hooks를 활용하여 개발을 진행했다. 이 과정에서 겪은 문제들과 해결 과정, 그리고 효율적인 컴포넌트 설계에 대해 공유하고자 한다.2. 기술 개요2.1 React 18 개요React 18은 동시성 렌더링(Concurrent Rendering)과 자동 배치(Automatic Batching) 등의 새로운 기능을 추가하여 성능을 향상시킨 버전이다. 주요 기능은 다음과 같다:Concurrent Rendering: UI 업데이트를 더욱 부드럽게 처리할 수 있도록 함Automatic Batching: 여러 상태 업데이트를 자동으로 배치하여 불필요한 렌더링 방지Transition API: UI 상태 전환을 더욱..

React 2025.03.18