아, 리액트! UI 구축을 위한 우리가 사랑하는 라이브러리입니다. 웹 앱이 대화형이고 빠르게 느껴지게 만드는 마법의 묘약입니다. 언젠가는 그렇지 않게 됩니다. 갑자기 상황이 느려지는 것을 발견하게 됩니다. 버튼을 클릭하는 것은 마치 비둘기가 편지를 보내는 것과 같은 느낌입니다. 귀하의 앱은 빛처럼 빠른 것에서 커피 브레이크의 느린 속도로 바뀌고 사용자는 귀하에게 "외모"를 주기 시작합니다.

하지만 걱정하지 마세요! 커피가 인생의 대부분의 문제를 해결할 수 있는 것처럼(또는 그렇게 생각하고 싶습니다) 몇 가지 핵심 기술을 사용하면 React 앱을 터보차지하고 최고 속도로 되돌릴 수 있습니다. 일일 카페인 섭취량보다 빠르게 React 앱을 최적화하는 6가지 간단한 방법을 살펴보겠습니다.

1. 코드 분할: 필요한 것만 로드

방에 들어가서 모든 조명을 켰는데 조명이 하나만 필요하다는 것을 깨달은 적이 있습니까? 이것이 모든 것을 하나의 큰 덩어리로 묶을 때 React 앱이 수행하는 작업입니다. 대신, 코드 분할을 사용하면 현재 필요한 앱 부분만 로드할 수 있습니다. 마치 방마다 조명을 켜는 것과 같습니다!

React.lazy() 및 Suspense를 사용하는 것은 이를 구현하는 완벽한 방법입니다.

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

const App = () => {
  return (
    Loading...}>
      
    
  );
}

도움이 되는 이유: 코드 분할은 필요할 때까지 사용하지 않는 코드 로드를 연기하여 앱의 초기 로드 시간을 줄여줍니다. 사용자는 화면에 무언가를 보기 전에 전체 앱이 로드될 때까지 기다릴 필요가 없습니다.

2. 지연 로딩 이미지: 모든 간식을 한 번에 로드하지 마세요

피자를 주문하고 대신 1년 치 식료품을 받는 것을 상상해 보세요. 말도 안되는 소리 같죠? 음, 모든 이미지를 미리 로드하면 이런 일이 발생합니다. 대신 이미지를 지연 로드하므로 한 번에 피자 한 개씩 주문하는 것처럼 필요한 것만 가져옵니다.

react-lazyload와 같은 라이브러리를 사용하는 것이 빠른 해결 방법입니다.

import LazyLoad from 'react-lazyload';


  

도움이 되는 이유: 이미지 지연 로딩을 통해 초기 페이지 로드 시간을 줄이고 필요할 때만 이미지를 다운로드하므로 성능과 사용자 경험이 모두 향상됩니다.

3. useCallback 및 useMemo: React용 메모리 부스트

세척 시간을 절약하기 위해 동일한 커피 머그를 계속 재사용하는 것처럼, React는 허용한다면 값과 기능을 재사용할 수 있습니다! useCallback 및 useMemo는 비용이 많이 드는 계산이나 함수를 저장하는 데 도움이 되는 후크이므로 렌더링할 때마다 다시 계산되지 않습니다.

useMemo 예:

const expensiveCalculation = (num) => {
  return num ** 2;
};

const MyComponent = ({ num }) => {
  const squaredNumber = React.useMemo(() => expensiveCalculation(num), [num]);

  return 
{squaredNumber}
;
}

useCallback 예:

const handleClick = useCallback(() => {
  console.log("Clicked");
}, []);

도움이 되는 이유: useMemo를 사용하면 React는 불필요하게 비용이 많이 드는 계산을 다시 실행할 필요가 없습니다. 그리고 useCallback은 렌더링할 때마다 새로운 함수를 생성하는 것을 방지합니다. 이렇게 하면 RAM을 업그레이드하는 것처럼 React가 원활하게 실행됩니다!

4. React.memo를 이용한 메모: 불필요한 재렌더링 방지

같은 이야기만 반복하는 친구가 있나요? React도 그럴 수 있습니다. 필요하지 않은 경우에도 구성 요소를 다시 렌더링합니다! 이것이 React.memo가 등장하는 곳으로, props가 변경되지 않는 한 React가 구성 요소를 다시 렌더링하는 것을 방지합니다.

const MyComponent = React.memo(({ value }) => {
  return 
{value}
;
});

도움이 되는 이유: React.memo는 React에게 "야, 이 말을 전에 들어본 적 있어!"라고 말하는 것과 같습니다. 새로운 것이 없으면 반복하지 마세요.” 불필요한 재렌더링을 방지하여 시간과 리소스를 절약합니다.

5. 효율적인 상태 관리: 필요할 때만 해제

상태를 높이는 것은 React의 일반적인 패턴이지만 때로는 상태를 너무 높이거나 잘못된 위치에서 너무 많은 상태를 관리하는 죄를 범하기도 합니다. 이로 인해 과도한 재렌더링이 발생할 수 있습니다. 가능할 때마다 상태를 구성 요소에 대해 로컬로 유지하고 꼭 필요한 경우에만 상태를 해제하여 불필요한 재렌더링을 피하세요.

const ParentComponent = () => {
  const [sharedState, setSharedState] = useState(false);

  return (
    
      
      
    >
  );
}

const ChildComponent = ({ sharedState }) => {
  return 
{sharedState ? 'Active' : 'Inactive'}
;
}

const AnotherChild = ({ setSharedState }) => {
  return  setSharedState(true)}>Activate;
}

도움이 되는 이유: 상태를 더욱 주의 깊게 관리하고 필요할 때만 해제하면 형제 구성 요소가 불필요하게 다시 렌더링되는 것을 방지할 수 있습니다. 이렇게 하면 앱의 집중력과 효율성이 유지됩니다.

6. 사용자 입력 디바운싱: 진정하고 반응하세요!

누군가가 검색창에 정신없이 입력하고 앱이 모든 키 입력을 처리하려고 한다고 상상해 보세요. 불쌍한 React는 아마도 땀을 흘리는 총알일 것입니다! 디바운싱 입력 - 모든 키를 누를 때마다가 아니라 사용자가 일시 중지한 후에만 입력을 처리하는 프로세스입니다.

lodash.debounce를 사용하면 이 문제를 해결할 수 있습니다.

import _ from 'lodash';

const Search = () => {
  const [query, setQuery] = useState('');

  const debouncedSearch = _.debounce((input) => {
    // Do your search logic
    console.log(input);
  }, 500);

  const handleChange = (e) => {
    setQuery(e?.target?.value);
    debouncedSearch(e?.target?.value);
  };

  return ;
}

도움이 되는 이유: 키를 누를 때마다 React가 공황 발작을 일으키는 대신 디바운싱을 사용하면 잠시 휴식을 취할 수 있습니다. 이는 검색 또는 양식 필드와 같은 실시간 사용자 입력을 처리할 때 더 나은 성능을 보장합니다.

결론: React 애플리케이션 최적화는 로켓 과학이 아닙니다. 한 번에 커피 6잔을 마시지 않도록 하는 것과 같습니다! 코드 분할부터 이미지 지연 로딩까지 이러한 기술은 React 앱의 속도와 반응성을 유지하는 데 도움이 됩니다. 따라서 다음에 앱이 느리게 느껴지기 시작하면 기억하세요: 그것은 React의 잘못이 아닙니다. 단지 약간의 최적화가 필요할 뿐입니다!

React 앱 최적화는 균형을 이루는 것임을 기억하세요. 이러한 기술을 모두 즉시 투입할 필요는 없습니다. 대신, 앱의 병목 현상을 식별하고, 적절한 최적화를 적용하고, 커피를 마칠 수 있는 것보다 앱이 더 빨라지는 것을 지켜보세요!

읽어주셔서 감사합니다. 게시물이 마음에 드셨다면 공유하고 제안도 남겨주세요.

나와 연결하세요

웹사이트: Hardik Gohil

Github: https://github.com/HardikGohilHLR

링크드인: https://www.linkedin.com/in/hardikgohilhlr

감사합니다 ❤️