React 앱의 렌더링 및 재렌더링 이해: 작동 방식 및 최적화 방법

React에서 애플리케이션을 만들 때 컴포넌트 렌더링 및 다시 렌더링이라는 용어를 자주 접하게 됩니다. 언뜻 보면 간단해 보일 수 있지만 useState, Redux와 같은 다양한 상태 관리 시스템 또는 useEffect와 같은 수명 주기 후크를 삽입하면 상황이 흥미로워집니다. 애플리케이션을 빠르고 효율적으로 진행하려면 이러한 프로세스를 이해하는 것이 중요합니다.

렌더링이란 무엇입니까?

렌더링은 React가 상태나 소품을 기반으로 사용자 인터페이스(UI)를 화면에 표시하는 프로세스입니다. 구성 요소가 처음으로 렌더링되는 경우를 첫 번째 렌더링이라고 합니다.

초기 렌더링은 어떻게 작동합니까?

구성요소가 DOM에 처음 "마운트"되면 다음과 같은 일이 발생합니다.

1. 상태 초기화:
useState, props 또는 Redux를 사용하든 구성 요소의 초기 상태가 생성됩니다.

2. 렌더링 기능:
React는 JSX 코드를 반복하고 현재 상태를 기반으로 가상 DOM을 생성합니다.

3. 구성요소의 현재 상태에 대한 가상 DOM(Virtual DOM)을 생성합니다.

4. 비교(비교):
가상 DOM은 실제 DOM과 비교됩니다(첫 번째 렌더링이므로 모든 요소가 완전히 렌더링됩니다).

5. 디스플레이:
구성요소가 화면에 표시됩니다.
구성 요소가 렌더링되면 다음 과제는 렌더링하는 것입니다.

재렌더링: 언제, 왜?

상태나 소품이 변경될 때마다 렌더링이 발생합니다. 화면에 숫자가 바뀌는 버튼을 클릭하셨나요? Redux 스토어에서 값을 변경했나요? 이러한 모든 작업으로 인해 React가 구성 요소를 다시 렌더링할 수 있으며, 이때 다시 렌더링이 필요합니다.

렌더링은 어떻게 작동하나요?

상태 변경 감지:

• useState를 사용하면 setState를 호출하면 React가 구성 요소를 업데이트해야 한다는 것을 인식합니다.

• Redux를 사용하면 저장소의 값이 변경되면 해당 상태 부분과 관련된 모든 구성 요소가 다시 렌더링됩니다.

렌더링 트리거:

상태가 변경되면 React는 해당 변경 사항을 기반으로 새로운 가상 DOM을 생성합니다.

비교(차이):

• React는 새로운 가상 DOM을 이전 가상 DOM과 비교하고 어떤 변경 사항을 적용할지 계산합니다. 이는 React가 렌더링을 최적화하는 한 가지 방법입니다.

변경사항 보기:

• 변경 사항이 계산된 후 React는 이를 실제 DOM에 적용합니다. 따라서 페이지에서 변경된 부분만 다시 표시됩니다.

어떤 구성 요소가 렌더링됩니까?

변경할 때마다 모든 구성 요소가 영향을 받는 것은 아닙니다. React는 다음과 같은 구성요소만 다시 렌더링합니다.

현지 주 사용:
useState를 사용하면 setState.

Redux 상태 사용:
구성 요소가 Redux 상태(useSelector 또는 연결을 통해)에 의존하는 경우 상태의 해당 부분이 변경되면 다시 렌더링됩니다.

소품 사용:
props 값이 변경되면 구성 요소가 새 값으로 다시 렌더링됩니다.

렌더링 최적화

물론 모든 구성 요소를 불필요하게 다시 렌더링하는 것이 항상 이상적인 것은 아닙니다. 애플리케이션이 빠르고 효율적으로 작동하도록 하려면 다음과 같은 몇 가지 최적화 기술을 사용하십시오.

1. 구성요소 메모
React는 React.memo를 통해 구성요소 메모 기능을 제공합니다. 구성 요소가 props나 상태 변경에 의존하지 않는 경우 이를 "기억"할 수 있으므로 관련 값이 변경될 때만 다시 렌더링됩니다.

예:

const MemoizedComponent = React.memo(MyComponent);

2. 기능과 값의 암기

렌더링할 때마다 함수나 값이 다시 생성되는 것을 방지하려면 useCallback을 사용하여 함수를 메모하고 useMemo를 사용하여 값을 메모하세요.

• useCallback을 사용하면 함수를 기억하고 종속성이 변경될 때까지 함수가 다시 생성되는 것을 방지할 수 있습니다.

• useMemo는 함수의 결과를 기억하므로 각 렌더링마다 다시 계산되지 않습니다.

예:

const increment = useCallback(() => {
  setCount(prevCount => prevCount + 1);
}, []);

const expensiveCalculation = useMemo(() => {
  return count * 2;
}, [count]);

3. 리덕스 최적화

Redux를 사용하는 경우 reselect와 같은 메모된 선택기를 사용하여 애플리케이션을 더욱 최적화할 수 있습니다. 이를 통해 상태 변경의 영향을 받지 않는 구성 요소를 다시 렌더링하는 것을 방지할 수 있습니다.

Lifecycle Hook-ovi i Rerenderovanje

U klasičnim React klasama, koristili smo shouldComponentUpdate da kontrolišemo kada će se komponenta ponovo renderovati. U funkcionalnim komponentama, ovaj koncept se može simulirati pomoću useEffect i memoizacije.

Zaključak

Renderovanje i rerenderovanje su ključni za prikaz korisničkog interfejsa u React aplikacijama, ali pravilno razumevanje i optimizacija tih procesa može napraviti razliku između spore i super brze aplikacije. Ispravno korišćenje memoizacije, useCallback, useMemo, kao i pažljivo rukovanje Redux-om, pomaže da izbegnemo nepotrebne re-rendere i održimo naše aplikacije brzim i responzivnim.

Primer Koda: Renderovanje i Rerenderovanje u Akciji
Evo primera komponente koja koristi useState, Redux i memoizaciju da optimizuje renderovanje:

import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { useSelector, useDispatch } from 'react-redux';

const MyComponent = () => {
  // Lokalni state
  const [count, setCount] = useState(0);

  // Redux state
  const reduxValue = useSelector(state => state.someValue);
  const dispatch = useDispatch();

  // Memoizacija funkcije kako bi se izbeglo ponovno kreiranje na svakom renderu
  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []);

  // Memoizacija izračunate vrednosti
  const expensiveCalculation = useMemo(() => {
    return count * 2;
  }, [count]);

  // Efekat koji se pokreće samo pri promeni reduxValue
  useEffect(() => {
    console.log("Redux value changed:", reduxValue);
  }, [reduxValue]);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Expensive Calculation: {expensiveCalculation}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={() => dispatch({ type: 'SOME_ACTION' })}>
        Dispatch Redux Action
      </button>
    </div>
  );
};

Kao što vidimo, ovde se koristi kombinacija lokalnog state-a, Redux-a, memoizacije i useEffect hook-a da bi aplikacija bila što efikasnija.

위 내용은 React 앱의 렌더링 및 재렌더링 이해: 작동 방식 및 최적화 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!