코드 품질과 성능을 향상시키는 트릭

React는 사용자 인터페이스 구축을 위한 강력한 JavaScript 라이브러리이며, 몇 가지 트릭만 사용하면 더 깔끔하고 효율적이며 유지 관리가 쉬운 코드를 작성할 수 있습니다. 이 기사에서는 보다 성능이 뛰어나고 읽기 쉬운 코드를 작성하는 데 도움이 되는 5가지 필수 React 트릭을 살펴보겠습니다.

---

1. AND(&&) 연산자 대신 삼항 연산자를 사용하여 요소 렌더링

React에서는 특정 조건에 따라 구성요소나 요소를 조건부로 렌더링하는 것이 일반적입니다. 그러나 조건부 렌더링에 && 연산자를 사용하는 것은 평가된 표현식의 결과가 잘못된 값(예: false, null, 정의되지 않음, 0 또는 '')인 경우 까다로울 수 있습니다. 의도하지 않은 렌더링 동작을 방지하려면 삼항 연산자를 사용하는 것이 좋습니다.

&& 동작의 예:

조건부 렌더링에서 && 사용:

{0 && <h1>Hello world 5</h1>}
{0 ? <h1>Hello world 6</h1> : null}

• 첫 번째 예({0 &&

  Hello world 5

  })는 0이 JavaScript에서 거짓 값이기 때문에 UI에서 0을 렌더링하고 React는 이를 거짓으로 해석합니다. 그러나 React는 아무것도 렌더링하지 않고 거짓 값(0) 자체를 렌더링합니다.

• 두 번째 예({0 ?

  Hello world 6

  : null})는 아무 것도 렌더링하지 않습니다. 조건이 0(거짓)이므로 삼항 연산자는 null로 평가되며 React는 아무것도 렌더링하지 않습니다.

삼항 연산자를 사용한 더 나은 접근 방식:

&& 연산자에 의존하는 대신 삼항 연산자를 사용하여 특히 조건이 거짓인 경우 올바른 대체 콘텐츠를 렌더링할 수 있습니다.

{0 ? <h1>Hello world 5</h1> : null}

이 경우 조건이 거짓(0)이면 React는 null을 렌더링하므로 아무것도 렌더링되지 않아 더 예측 가능하고 의도된 동작을 제공합니다.

---

2. useState를 사용한 지연 초기화

React의 useState 후크는 함수를 초기 값으로 사용하여 상태를 느리게 초기화할 수 있습니다. 이는 초기 상태를 계산하는 데 비용이 많이 들거나 한 번만 실행해야 하는 일부 계산에 의존하는 경우에 특히 유용합니다.

지연 초기화를 사용하는 이유는 무엇입니까?

• 성능 개선: 초기 상태에 비용이 많이 드는 계산이나 데이터 가져오기가 포함된 경우 지연 초기화는 실제로 필요할 때까지 해당 비용을 연기하는 데 도움이 됩니다.
• 불필요한 계산 방지: useState에 초기 값으로 전달하는 함수는 구성 요소 마운트 중에 한 번만 실행되며 후속 렌더링 중에는 다시 계산되지 않습니다.

예:

{0 && <h1>Hello world 5</h1>}
{0 ? <h1>Hello world 6</h1> : null}

이 예에서는:

• useState(() => Math.random())은 초기 렌더링 시 함수를 한 번만 호출합니다.
• 이렇게 하면 난수 생성이 한 번만 발생하므로 계산 비용이 많이 드는 경우 성능이 향상됩니다.

---

3. 지연 로드 구성 요소를 사용하여 성능 향상

React의 React.lazy() 및 Suspense는 지연 로딩 구성 요소를 위한 훌륭한 도구로, JavaScript를 더 작은 번들로 분할하고 필요할 때만 로드하는 데 도움이 됩니다. 이를 통해 초기 로드 시간이 크게 줄어들고 앱 성능이 향상됩니다.

예:

{0 ? <h1>Hello world 5</h1> : null}

이 예에서는:

• React.lazy()를 사용하면 LazyComponent를 동적으로 가져올 수 있습니다.
• Suspense 구성 요소는 지연 로드 구성 요소가 완전히 렌더링될 때까지 로드 상태를 표시하는 데 사용됩니다.

지연 로딩을 사용하면 앱이 초기 렌더링에 필요한 구성 요소만 로드하고 필요에 따라 다른 구성 요소를 가져오므로 특히 대규모 애플리케이션에서 성능이 향상됩니다.

---

4. JavaScript에서 선택적 연결 사용

JavaScript로 작업하는 경우 객체의 깊게 중첩된 속성에 액세스할 때 선택적 연결(?.)이 생명의 은인이 됩니다. 정의되지 않음 또는 null 속성에 액세스하려고 할 때 발생하는 오류를 방지합니다. 선택적 체이닝은 최신 JavaScript에서 사용할 수 있으며 이를 통해 null 또는 정의되지 않음을 수동으로 확인할 필요 없이 속성에 안전하게 액세스할 수 있습니다.

예:

import React, { useState } from 'react';

const ExpensiveComponent: React.FC = () => {
  const [count, setCount] = useState(() => {
    // Expensive computation
    console.log('Computing initial state');
    return Math.random(); // For example, generate a random number
  });

  return <div>Initial Random Value: {count}</div>;
};

export default ExpensiveComponent;

이 예에서는:

• data?.info?.address는 데이터 또는 정보가 정의되지 않거나 null인 경우 오류를 발생시키지 않고 주소 속성에 안전하게 액세스합니다.
• ?? 주소가 정의되지 않은 경우 연산자는 기본값을 제공합니다.

선택적 체이닝이 없으면 각 레벨을 수동으로 확인해야 하므로 코드가 금방 복잡해지고 읽기 어려워질 수 있습니다. 선택적 연결을 사용하면 깔끔하고 오류가 없습니다.

---

5. 재렌더링을 피하기 위해 양식에 useRef를 사용하세요

React에서 양식 작업을 할 때 각 입력 변경 시 구성 요소를 다시 렌더링할 필요가 없으면 useState 대신 useRef를 사용하는 것이 좋습니다. useRef는 입력 필드의 값을 직접 저장하고 값이 변경될 때 다시 렌더링을 트리거하지 않으므로 대규모 양식의 성능이 더욱 향상됩니다.

예:

{0 && <h1>Hello world 5</h1>}
{0 ? <h1>Hello world 6</h1> : null}

이 TypeScript 예에서는:

• useRef는 입력이 변경될 때마다 구성 요소를 다시 렌더링하지 않고 입력 값을 추적하는 데 사용됩니다.
• nameRef.current는 양식이 제출될 때 입력 값에 직접 액세스하는 데 사용됩니다.

useRef를 사용하는 것은 양식 값이 유효성 검사 또는 동적 업데이트를 위해 다시 렌더링을 트리거할 필요가 없을 때 특히 유용하므로 성능에 민감한 양식에 탁월한 선택입니다.

---

결론

5가지 React 트릭을 코드에 적용하면 성능, 가독성 및 유지 관리성을 크게 향상시킬 수 있습니다. 간단히 요약하자면 다음과 같습니다.

1. 조건부 렌더링에는 && 대신 삼항 연산자를 사용하세요.
2. useState에서 지연 초기화를 활용하세요.
3. 초기 로드 시간을 개선하기 위해 구성요소에 지연 로딩을 구현합니다.
4. JavaScript에서 보다 안전한 속성 액세스를 위해 선택적 체이닝을 사용하세요.
5. 불필요한 재렌더링을 방지하려면 양식에 useRef를 사용하세요.

이러한 기술을 사용하면 React 애플리케이션이 더욱 효율적이고 유지 관리가 쉬워져 더 나은 사용자 경험과 원활한 개발이 가능해집니다. 즐거운 코딩하세요!

위 내용은 코드 품질과 성능을 향상시키는 트릭의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!