로고

React.js 조정(Reconciliation) 알고리즘: 효율적인 UI 업데이트

작성일 :

React.js 조정(Reconciliation) 알고리즘: 효율적인 UI 업데이트

React.js는 사용자 인터페이스(UI)를 구축하는 데 널리 사용되는 JavaScript 라이브러리입니다. React의 가장 큰 장점 중 하나는 변경된 부분만을 업데이트하는 효율적인 방식으로, 이를 가능하게 하는 핵심 요소가 바로 조정(Reconciliation) 알고리즘입니다. 이 글에서는 React의 조정 알고리즘이 어떻게 작동하는지, 그리고 이를 통해 효율적인 UI 업데이트를 어떻게 달성하는지에 대해 자세히 알아보겠습니다.

조정 알고리즘의 개요

조정 알고리즘은 번거로운 DOM 조작을 최소화하고 성능을 최적화하기 위해 도입되었습니다. React는 컴포넌트의 상태 또는 속성이 변경될 때마다 전체 UI를 다시 렌더링하는 대신, 변경된 부분만을 효율적으로 업데이트합니다. 이 과정에서 두 가지 버전의 UI 트리를 비교하여 서로 다른 부분을 찾아냅니다. 이 비교 과정이 바로 조정입니다.

가상 DOM(Virtual DOM)

조정 알고리즘의 개념을 이해하기 위해선 여기에 사용되는 가상 DOM(Virtual DOM)을 알아야 합니다. 가상 DOM은 실제 DOM의 가벼운 사본으로, 메모리 내에서 작동합니다. React는 상태나 속성이 변경될 때마다 새로운 가상 DOM을 생성하고, 이전 가상 DOM과 새로운 가상 DOM을 비교합니다. 이 과정을 Diffing이라 합니다.

Diffing 알고리즘

React의 Diffing 알고리즘은 2013년 페이스북에서 논문으로 처음 발표되었으며, 매우 효율적으로 설계되었습니다. Diffing 알고리즘의 주요 단계는 다음과 같습니다.

  1. 노드 유형이 다른 경우: 두 노드의 유형이 다른 경우, React는 두 노드를 완전히 다른 것으로 간주하고, 이전 노드를 제거한 후 새로운 노드를 삽입합니다.
  2. 텍스트 노드 비교: 두 노드가 모두 텍스트 노드일 경우, 텍스트 내용을 비교하여 다를 경우 내용을 업데이트합니다.
  3. 트리 구조 비교: 재귀적으로 하위 트리까지 내려가며 노드를 비교합니다. 각 노드는 key라는 고유한 식별자를 가지며, 이 key를 통해 동일한 노드를 식별합니다.

Key의 중요성

노드 비교를 최적화하기 위해 key 속성이 매우 중요합니다. key는 고유한 값으로 설정해야 하며, 일반적으로 리스트에서 각 아이템의 식별자로 사용됩니다. 예를 들어, 리스트 아이템을 다시 배열하거나 추가, 삭제할 때 key 속성 덕분에 React는 어떤 노드가 변경되었는지 쉽게 파악할 수 있습니다.

최적화 기법

React에서는 UI 업데이트 성능을 최적화하기 위한 다양한 기법이 제공됩니다. 그 중 몇 가지를 살펴보겠습니다.

shouldComponentUpdate 메서드

클래스 컴포넌트에서 shouldComponentUpdate 메서드를 오버라이드하면 컴포넌트가 업데이트될지 여부를 결정할 수 있습니다. 이 메서드는 다음과 같이 사용할 수 있습니다.

javascript
class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 조건에 따라 true 또는 false를 반환
    return nextProps.someValue !== this.props.someValue;
  }
}

React.memo와 PureComponent

함수형 컴포넌트에서는 React.memo를 사용하여 컴포넌트를 메모이제이션할 수 있습니다. 이는 컴포넌트가 동일한 props로 재렌더링되는 것을 방지합니다.

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

클래스 컴포넌트에서는 PureComponent를 사용할 수 있습니다. PureComponent는 기본적인 shouldComponentUpdate 메서드를 제공하여, props와 state가 변경된 경우에만 재렌더링을 수행합니다.

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

불변성 유지

React는 상태 변경을 감지할 때 객체의 참조가 변경되었는지 여부를 확인합니다. 따라서 상태를 업데이트할 때 불변성을 유지하는 것이 중요합니다. 아래와 같이 spread 연산자나 Object.assign을 사용하여 새로운 객체를 생성하여 상태를 업데이트할 수 있습니다.

javascript
this.setState(prevState => ({
  items: [...prevState.items, newItem]
}));

또는

javascript
this.setState(prevState => ({
  details: Object.assign({}, prevState.details, { age: 30 })
}));

결론

React의 조정 알고리즘은 변경된 부분만을 효율적으로 업데이트하여 최적의 성능을 제공합니다. 이는 가상 DOM과 Diffing 알고리즘 덕분에 가능합니다. 또한, 최적화를 위해 key 속성의 사용, shouldComponentUpdate 메서드, React.memo, PureComponent 및 불변성 유지와 같은 기법을 잘 활용하면 더욱 효율적인 UI 업데이트가 가능합니다. React를 사용하여 복잡한 UI를 구축할 때, 조정 알고리즘의 작동 방식을 이해하고 적절히 활용하는 것은 매우 중요합니다.