[React] 리액트 렌더링 알아보기

 

들어가며

리액트(React)는 현대 웹 개발에서 가장 널리 사용되는 라이브러리 중 하나로, 그 핵심은 효율적이고 직관적인 렌더링(Rendering)입니다. 이번에는 리액트 렌더링에 대해 기본 개념을 알아보겠습니다.

 

간단 키워드

• 리액트 렌더링
• 렌더링 발생 조건
• 최적화 방법
• Reconciliation

---

리액트 렌더링

리액트에서 렌더링이란?

리액트에서 렌더링은 컴포넌트의 상태(state)나 속성(props)이 변경될 때, UI를 갱신하기 위해 화면에 요소를 다시 그리는 과정을 의미합니다. 이 과정은 효율성을 위해 가상 DOM (Virtual DOM)을 사용합니다. 리액트는 변경 사항만 계산해 실제 DOM 업데이트를 최소화함으로써 성능을 최적화합니다.

 

가상 DOM

가상 DOM은 실제 DOM의 가벼운 복사본으로, 메모리에 저장되어 빠른 비교가 가능합니다. 리액트는 상태나 속성 변화 시 다음 단계를 거칩니다:

1. 변경된 데이터로 새로운 가상 DOM 생성.
2. 이전 가상 DOM과 비교(diffing)하여 변경 사항 계산.
3. 필요한 부분만 실제 DOM에 반영

장점

• 성능 최적화 : 불필요한 전체 DOM 업데이트를 방지.
• 효율성 : 변경된 부분만 업데이트.

 

리액트에서 렌더링이 발생하는 조건

렌더링은 다음 상황에서 발생합니다:

• Props 변경 : 부모 컴포넌트에서 전달된 props가 변경될 때
• State 변경 : 컴포넌트 내부의 상태가 업데이트될 때
• 부모 컴포넌트 렌더링 : 부모 컴포넌트가 렌더링되면 자식 컴포넌트도 영향을 받을 수 있음
• 강제 업데이트 : `forceUpdate()` 메서드 호출 시 

 

---

렌더링 심화

렌더링 최적화 방법

React.memo

컴포넌트를 메모이제이션하여 props가 변경되지 않으면 재렌더링을 방지합니다.

import React from 'react';
const MemoizedComponent = React.memo(MyComponent);

useCallback과 useMemo

• `useCallback` : 함수를 메모이제이션
• `useMemo` : 값을 메모이제이션

const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

컴포넌트 분리

컴포넌트를 작은 단위로 분리하여 필요한 부분만 렌더링

키(Key) 사용

리스트 렌더링 시 고유한 키를 설정해 효율적으로 DOM 노드를 업데이트

{items.map(item => <ListItem key={item.id} {...item} />)}

 

React의 Reconciliation

Reconciliation은 리액트가 가상 DOM을 통해 변경 사항을 비교(diffing)하고, 최소한의 DOM 업데이트를 수행하는 과정입니다. 이를 통해 리액트는 효율적이고 빠르게 UI를 갱신합니다.

 

Key의 역할

리스트 렌더링 시 각 요소를 고유하게 식별하여 변경 사항을 정확히 추적합니다. 고유하지 않은 키는 의도치 않은 UI 오류를 유발할 수 있습니다.

 

렌더링 중 성능 문제와 해결 방법

성능 문제

• 불필요한 재렌더링 : 상태나 props가 변하지 않았는데도 렌더링이 발생
• 큰 컴포넌트 트리 : 복잡한 트리가 자주 렌더링될 때 성능 저하

해결 방법

• React.memo와 shouldComponentUpdate 사용 : 재렌더링 방지
• React DevTools Profiler : 병목 현상 분석
• useCallback과 useMemo : 함수와 값을 메모이제이션
• 코드 스플리팅 : 동적으로 필요한 코드만 로드

 

useEffect와 렌더링

`useEffect`는 렌더링 이후 실행되는 사이드 이펙트를 관리합니다.

 

의존성 배열의 활용

• 빈 배열(`[]`) : 처음 한 번만 실행
• 특정 값([value]) : 값이 변경될 때만 실행

useEffect(() => {
  console.log('Component mounted or updated');
}, [dependency]);