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

렌더링이란 무엇입니까?

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

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

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

1. 상태 초기화:
useState, props, Redux 중 무엇을 사용하든 컴포넌트의 초기 상태가 생성됩니다.

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

3. 구성 요소의 현재 상태에 대한 가상 DOM(가상 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 최적화

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

수명주기 후크 및 렌더링

클래식 React 클래스에서는 shouldComponentUpdate를 사용하여 구성 요소가 다시 렌더링되는 시기를 제어했습니다. 기능적 구성 요소에서는 useEffect 및 메모이제이션을 사용하여 이 개념을 시뮬레이션할 수 있습니다.

결론

렌더링과 재렌더링은 React 앱의 UI 표시에 매우 중요하지만 이러한 프로세스를 올바르게 이해하고 최적화하면 느린 앱과 초고속 앱의 차이를 만들 수 있습니다. 메모이제이션, useCallback, useMemo를 올바르게 사용하고 Redux를 주의 깊게 처리하면 불필요한 재렌더링을 방지하고 애플리케이션의 속도와 응답성을 유지하는 데 도움이 됩니다.

예제 코드: 렌더링 및 렌더링 실행
다음은 useState, Redux 및 메모이제이션을 사용하여 렌더링을 최적화하는 구성 요소의 예입니다.

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 (
    

      
Count: {count}
      
Expensive Calculation: {expensiveCalculation}
      Increment
       dispatch({ type: 'SOME_ACTION' })}>
        Dispatch Redux Action
      
    
  );
};

보시다시피 여기서는 로컬 상태, Redux, 메모이제이션 및 useEffect 후크의 조합이 사용되어 애플리케이션을 최대한 효율적으로 만듭니다.