더 나은 성능을 위해 React 애플리케이션을 최적화하는 필수 기술

소개

최신 웹 애플리케이션이 점점 더 복잡해짐에 따라 최적의 성능을 보장하는 것이 점점 더 중요해지고 있습니다. 사용자 인터페이스 구축을 위한 인기 있는 JavaScript 라이브러리인 React는 애플리케이션 성능을 향상시키기 위한 다양한 전략을 제공합니다. 소규모 프로젝트에서 작업하든 대규모 애플리케이션에서 작업하든 이러한 최적화 기술을 이해하고 구현하면 로드 시간이 빨라지고 사용자 경험이 원활해지며 리소스를 효율적으로 사용할 수 있습니다.

이 게시물에서는 효율적인 상태 관리 및 재렌더링 최소화부터 코드 분할 및 지연 로딩 활용에 이르기까지 React 애플리케이션을 최적화하는 필수 기술을 살펴보겠습니다. 이러한 전략은 고성능 애플리케이션을 제공하는 데 도움이 될 뿐만 아니라 애플리케이션이 성장함에 따라 확장성과 응답성을 유지하는 데도 도움이 됩니다. 성능을 최적화하여 React 애플리케이션을 최대한 활용하는 방법을 자세히 알아보겠습니다.

1. React.memo 사용: 불필요한 재렌더링 방지

React.memo는 기능적 구성 요소의 불필요한 재렌더링을 방지하는 데 도움이 되는 고차 구성 요소입니다. 구성 요소의 렌더링된 출력을 메모하고 소품이 변경된 경우에만 다시 렌더링하는 방식으로 작동합니다. 이는 특히 자주 렌더링되지만 소품이 자주 변경되지 않는 구성 요소의 경우 성능이 크게 향상될 수 있습니다.

예

불필요한 재렌더링을 피하기 위해 React.memo를 사용하는 예를 살펴보겠습니다.

설명

• "Increment Count" 버튼을 클릭하면 CountDisplay 구성 요소의 count 속성이 변경되므로 다시 렌더링됩니다.
• 입력 필드에 입력하면 상위 앱 구성 요소가 다시 렌더링되더라도 count 속성이 변경되지 않은 상태로 유지되므로 CountDisplay 구성 요소는 다시 렌더링되지 않습니다.

2. useMemo 및 useCallback Hooks 사용: 비용이 많이 드는 계산을 메모합니다.

React의 useMemo 및 useCallback 후크는 비용이 많이 드는 계산 및 함수를 메모하여 불필요한 재계산 및 재렌더링을 방지하는 데 사용됩니다. 이러한 후크는 특히 복잡한 계산이나 자주 렌더링되는 구성 요소를 처리할 때 React 애플리케이션의 성능을 크게 향상시킬 수 있습니다.

사용메모

useMemo는 값을 기억하는 데 사용되므로 종속성 중 하나가 변경될 때만 다시 계산됩니다.

예

설명

• "증분 숫자" 버튼을 클릭하면 값비싼 계산이 실행되고 콘솔에 "계산 중..."이 기록된 것을 볼 수 있습니다.
• useMemo 덕분에 입력 필드에 입력해도 값비싼 계산이 실행되지 않습니다.

콜백 사용

useCallback은 함수를 메모하는 데 사용되므로 종속성 중 하나가 변경될 때만 다시 생성됩니다.

예

설명

• "Increment Count" 버튼을 클릭하면 증가 기능이 트리거되고 Button 구성 요소가 불필요하게 다시 렌더링되지 않습니다.
• useCallback 덕분에 입력 필드에 입력해도 Button 구성 요소가 다시 렌더링되지 않습니다.

3. 지연 로딩 및 코드 분할: 구성 요소를 동적으로 로드

지연 로딩 및 코드 분할은 필요할 때만 구성 요소를 로드하여 애플리케이션 성능을 향상시키기 위해 React에서 사용되는 기술입니다. 이렇게 하면 초기 로드 시간이 줄어들고 전반적인 사용자 경험이 향상될 수 있습니다.

- React.lazy 및 Suspense를 사용한 지연 로딩

React는 구성요소의 지연 로딩을 가능하게 하는 내장 함수 React.lazy를 제공합니다. 이를 통해 코드를 더 작은 덩어리로 분할하고 필요할 때 로드할 수 있습니다.

예

설명

1. 반응.게으른:

• React.lazy는 LazyComponent를 동적으로 가져오는 데 사용됩니다.
• import 문은 구성 요소로 확인되는 약속을 반환합니다.

2. 서스펜스:

• Suspense 구성 요소는 지연 로드 구성 요소를 래핑하는 데 사용됩니다.
• 구성요소가 로드되는 동안 표시할 대체 UI(로드 중...)를 제공합니다.

- React.lazy 및 React Router를 사용한 코드 분할

React Router와 함께 지연 로딩 및 코드 분할을 사용하여 경로 구성 요소를 동적으로 로드할 수도 있습니다.

예

설명

• 지연 로드 경로 구성 요소:
  React.lazy는 Home 및 About 구성 요소를 동적으로 가져오는 데 사용됩니다.

• Suspense 및 React Router:
  Suspense 구성 요소는 경로 구성 요소가 로드되는 동안 대체 UI를 제공하기 위해 Routes 구성 요소를 래핑합니다.

4. Virtualize Long Lists: Renders only the visible items

Virtualizing long lists in React using libraries like react-window or react-virtualized can significantly improve performance by rendering only the visible items. This technique is essential for handling large datasets efficiently and ensuring a smooth user experience.

Example

import React from 'react'; import { List } from 'react-virtualized'; const rowRenderer = ({ index, key, style }) => ( 
 Row {index} 
 ); const App = () => { return (  ); }; export default App;

5. Debounce & Throttle Events: Limits the frequency of expensive operations

Debouncing and throttling are essential techniques to optimize performance in React applications by controlling the frequency of expensive operations. Debouncing is ideal for events like key presses, while throttling is more suited for continuous events like scrolling or resizing. Using utility libraries like Lodash can simplify the implementation of these techniques.

- Debounce

Debouncing ensures that a function is only executed once after a specified delay has passed since the last time it was invoked. This is particularly useful for events that trigger frequently, such as key presses in a search input field.

Example using Lodash

import React, { useState, useCallback } from 'react'; import debounce from 'lodash/debounce'; const App = () => { const [value, setValue] = useState(''); const handleInputChange = (event) => { setValue(event.target.value); debouncedSearch(event.target.value); }; const search = (query) => { console.log('Searching for:', query); // Perform the search operation }; const debouncedSearch = useCallback(debounce(search, 300), []); return ( 
  
 ); }; export default App;

- Throttle

Throttling ensures that a function is executed at most once in a specified interval of time. This is useful for events like scrolling or resizing where you want to limit the rate at which the event handler executes.

Example using Lodash

import React, { useEffect } from 'react'; import throttle from 'lodash/throttle'; const App = () => { useEffect(() => { const handleScroll = throttle(() => { console.log('Scrolling...'); // Perform scroll operation }, 200); window.addEventListener('scroll', handleScroll); return () => { window.removeEventListener('scroll', handleScroll); }; }, []); return ( 
 Scroll down to see the effect 
 ); }; export default App;

6. Optimize Images and Assets: Reduces the load time

Optimizing images and assets involves compressing files, using modern formats, serving responsive images, and implementing lazy loading. By following these techniques, you can significantly reduce load times and improve the performance of your React application.

Use the loading attribute for images to enable native lazy loading or use a React library like react-lazyload.

Example

import React from 'react'; import lazyImage from './lazy-image.webp'; const LazyImage = () => { return ( 
  
 ); }; export default LazyImage;

7. Avoid Inline Functions and Object Literals:

Avoiding inline functions and object literals is important for optimizing performance in React applications. By using useCallback to memoize functions and defining objects outside of the render method, you can minimize unnecessary re-renders and improve the efficiency of your components.

Example

// 1. Inline Function // Problematic Code:  setCount(count + 1)}>Increment // Optimized Code: // Use useCallback to memoize the function const handleClick = useCallback(() => { setCount((prevCount) => prevCount + 1); }, []); Increment // 2. Inline Object Literals // Problematic Code: 
 
Age: {age}
 
 // Optimized Code: const styles = { container: { padding: '20px', backgroundColor: '#f0f0f0', }, }; 
 
Age: {age}
 

8. Key Attribute in Lists: React identify which items have changed

When rendering lists in React, using the key attribute is crucial for optimal rendering and performance. It helps React identify which items have changed, been added, or removed, allowing for efficient updates to the user interface.

Example without key attribute

In this example, the key attribute is missing from the list items. React will not be able to efficiently track changes in the list, which could lead to performance issues and incorrect rendering.

 {items.map((item) => ( 
{item}
 ))} 

Example with key attribute as index

In the optimized code, the key attribute is added to each

 {items.map((item, index) => ( 
{item}
 ))} 

 {items.map((item) => ( 
{item.name}
 ))}