리액트 렌더링

React에서 렌더링은 UI를 업데이트하는 과정을 의미하며, 컴포넌트가 처음 화면에 나타나거나 상태 및 props가 변경될 때 발생합니다. 렌더링은 효율적으로 수행되며, 실제로 DOM을 업데이트하기 전에 가상 DOM(Virtual DOM)을 통해 최적화됩니다.

1. 렌더링의 종류

React의 렌더링은 크게 초기 렌더링과 재렌더링으로 나뉩니다.

초기 렌더링

• 컴포넌트가 처음으로 DOM에 그려지는 과정입니다.
• React는 컴포넌트를 호출하고, 가상 DOM을 생성한 후, 실제 DOM에 반영합니다.
• 발생 조건:
  • React 애플리케이션이 처음 로드될 때.
  • 컴포넌트를 새로 추가할 때.

재렌더링

• 상태(state)나 props가 변경될 때 발생하며, UI를 다시 업데이트합니다.
• React는 변경된 가상 DOM과 이전 가상 DOM을 비교(Diffing)하여 변경된 부분만 실제 DOM에 업데이트합니다.
• 발생 조건:
  • 컴포넌트의 상태가 변경될 때.
  • 부모 컴포넌트에서 props가 변경될 때.
  • 강제로 렌더링을 요청할 때(forceUpdate).

2. 렌더링 과정 (React의 작동 원리)

1. 컴포넌트 함수 호출 (Function Component)
   • 함수형 컴포넌트가 호출되어 JSX를 반환합니다.
2. 가상 DOM 생성
   • React는 반환된 JSX를 기반으로 가상 DOM 트리를 만듭니다.
3. 가상 DOM 비교 (Reconciliation)
   • 이전 가상 DOM과 새로운 가상 DOM을 비교하여 변경된 부분만 확인합니다.
4. 실제 DOM 업데이트
   • 변경된 부분만 실제 DOM에 반영합니다. 이를 통해 성능을 최적화합니다.

3. 렌더링 최적화 방법

React 렌더링을 최적화하기 위해 몇 가지 전략을 사용할 수 있습니다.

1) React.memo

• 컴포넌트의 props가 변경되지 않으면 재렌더링을 방지합니다.

 

const MyComponent = React.memo((props) => {
  return <div>{props.value}</div>;
});

2) useMemo

• 특정 연산의 결과를 메모이제이션하여 불필요한 연산을 줄입니다.

const computedValue = useMemo(() => {
  return expensiveCalculation(value);
}, [value]);

3) useCallback

• 함수를 메모이제이션하여 불필요한 함수 재생성을 방지합니다.

javascript

const memoizedCallback = useCallback(() => {
  doSomething();
}, [dependency]);

4) React.lazy & Suspense

• 코드 분할(Code Splitting)을 통해 필요한 시점에만 컴포넌트를 로드합니다.

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

5) shouldComponentUpdate / PureComponent

• 클래스 컴포넌트에서 재렌더링을 방지하기 위해 shouldComponentUpdate를 구현하거나 PureComponent를 사용할 수 있습니다.

 

class MyComponent extends React.PureComponent {
  render() {
    return <div>{this.props.value}</div>;
  }
}

4. 중요 개념

가상 DOM (Virtual DOM)

• 브라우저의 실제 DOM과 별개로 React 내부에서 사용하는 DOM의 가상 표현.
• 변경 사항을 최소화하여 성능을 최적화.

Diffing Algorithm

• React가 이전 가상 DOM과 새로운 가상 DOM을 비교하여 변경된 부분만 찾아내는 알고리즘.

React Fiber

• React의 재조정(Reconciliation) 알고리즘의 새로운 구현체로, 작업을 나눠 비동기적으로 처리하여 렌더링 성능을 향상.

5. 결론

React의 렌더링은 효율적이며, 가상 DOM과 Diffing 알고리즘을 통해 최소한의 DOM 업데이트만 수행합니다. 상태 및 props 관리가 렌더링에 직접 영향을 미치므로 최적화를 위해 React.memo, useMemo, useCallback 등을 적절히 활용하는 것이 중요합니다.