리액트

리액트에서 `index`를 key로 사용하는 것은 권장되지 않는 이유는 배열의 요소들이 추가되거나 삭제될 때, 배열의 순서가 바뀌는 경우 문제가 발생할 수 있기 때문입니다.리액트에서 `key`를 통해 리스트에서 어떤 요소가 변경, 추가, 삭제됐는지를 추적합니다. 그러나 index를 key로 사용하면 배열의 순서가 변경될 때 리액트가 요소들을 잘못 인식할 수 있습니다. 예를 들어 배열에 새로운 요소가 중간에 추가되면 그 뒤에 있는 요소들의 인덱스가 모두 변경되게 된다. 리액트는 이를 새로운 요소로 인식해 불필요하게 재렌더링을 하거나, 요소의 상태를 잘못 처리할 수 있습니다.// 초기 상태의 할일 목록const todos = [ { text: '운동하기' }, // index: 0 { text: '공부하..

리액트의 렌더링 과정은 크게 두가지로 `render phase`와 `commit phase`로 나뉜다.  1. render phase`render phase`는 리액트가 변화된 상태(state)나 props에 따라 어떤 UI가 변경되어야 할지 결정하는 단계입니다. 이 과정에서는 실제로 DOM을 업데이트하지 않고, 새로운 가상 DOM을 생성하여 기존 가상 DOM과 변경사항을 계산하고 비교합니다. 이 단계는 순수하게 계산하는 과정이기 때문에 성능에 영향을 주지 않도록 중단되거나 다시 실행될 수 있으며, `React 18`에서 도입된 `Concurrent Mode`를 사용해 비동기적으로 처리될 수도 있습니다.2. commit phase`commit phase`는 실제로 변화된 UI를 실제 DOM에 반영하는 단..

메모이제이션(Memoization)리액트를 성능 최적화하는 방법에는 대표적으로 `메모이제이션`을 말할 수 있습니다.리액트의 `memo`를 사용하여 컴포넌트를 메모이제이션 할 수 있습니다. 이는 컴포넌트의 props가 변경되지 않았을 때, 리렌더링을 방지하여 성능을 최적화 합니다. 특히, 렌더링 비용이 큰 컴포넌트에서 유용합니다.import React, { memo } from 'react';const MyExpensiveComponent = memo(({ data }) => { // 복잡한 연산이나 많은 DOM 조작이 필요한 컴포넌트 console.log('Expensive component rendered'); return ( {data.map(item => ( {it..

스플리팅 등장 배경리액트 애플리케이션의 경우 빌드를 통해서 배포를 한다. 이 과정에서 파일 크기를 가능하면 최소화 하는 것이 좋다.왜냐하면 파일 크기가 성능을 결정하고 결과적으로 사용자 경험(UX)에까지 영향을 미치기 때문이다.또한, 브라우저에서 JSX나 최신 자바스크립트 문법 등이 문제없이 잘 실행될 수 있도록 트랜스파일링하는 작업도 필요하다.일반적으로 이러한 작업은 빌드 도구인 Webpack, Parcel, Vite 등이 담당한다.Webpack, Parcel과 같은 경우에는 모든 자바스크립트 파일을 하나의 파일로 합치고, CSS 역시 하나의 파일로 합친다.하나의 파일로 모든 자바스크립트의 파일로 묶어서 빌드하면 파일의 크기가 매우 크고, 일부만 수정해도 다시 모든 자바스크립트 코드들을 새로 빌드해야 ..