[React] DOM과 재조정(Reconciliation) 이해하기(관계성)

돔...

재조정이란?

리액트에서 재조정은  VDOM에서 발생하는 변경 사항을 반영하는 과정입니다. VDOM은 메모리 상에 존재하는 가상의 DOM으로,

리액트에서 컴포넌트를 업데이트할 때 변경된 부분만 실제 DOM에 반영하려고 사용됩니다. 이 과정은 리액트의 성능과 효율성을 결정하는 중요한 요소 중 하나입니다.

 

*재조정 알고리즘

리액트는 재조정 알고리즘을 사용하여 최소한의 업데이트만 수행합니다. 이는 성능을 향상시키는데 중요한 역할을 합니다.

재조정 알고리즘은 다양한 최적화 기술을 사용하여 성능을 향상시킵니다. 예를 들어, 컴포넌트의 props나 state가 변경되었을 때, 해당 컴포넌트와 그 자식 컴포넌트만 다시 렌더링하고 나머지는 그대로 유지합니다.

Diffing 알고리즘

리액트의 재조정 알고리즘에서 핵심적인 역할을 수행하는 것이 Diffing 알고리즘입니다. diffing 알고리즘은 이전 Virtual DOM과 새로운 Virtual DOM을 비교하여 차이점을 찾습니다. 이후 이 차이점에 따라서 최소한의 변경만 일어나도록 DOM을 업데이트합니다.

이를 통해 변경되지 않은 부분은 다시 렌더링하지 않으므로 성능이 향상됩니다. 

 

업데이트 탐지

Diffing 알고리즘에서는 업데이트 탐지를 수행하여 변경된 부분을 찾아냅니다. 업데이트 탐지는 크게 두 가지 방법으로 수행됩니다.

 

1. 타입 비교

리액트에서는 컴포넌트가 렌더링될 때마다 가상 DOM을 생성합니다. 이전 가상 DOM과 새로운 가상 DOM을 비교하여 타입이 다른 경우에는 해당 컴포넌트를 완전히 새로 렌더링합니다.

 

2. 키 비교

만약 컴포넌트의 타입이 동일하다면, 리액트는 키(key)를 비교합니다. 키는 각 컴포넌트가 가진 고유 식별자입니다. 만약 키가 같다면 해당 컴포넌트를 재사용하고, 키가 다르다면 해당 컴포넌트를 새로 렌더링합니다

 

예를 들어, 다음과 같은 코드가 있다고 할 때,

function UserInfoList({ items }) {

  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

const items = [
  { id: 1, name: 'Orange' },
  { id: 2, name: 'Banana' },
];

위 컴포넌트(UserInfoList)가 렌더링될 때마다, 리액트는 각 항목의 key와 name을 비교하여 변경된 부분을 찾아냅니다. 만약

배열이 아래와 같이 변경된다면,

const items = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
];

리액트는 이전에 렌더링된 가상 DOM과 새로운 가상 DOM을 비교하면서, key와 name을 비교합니다. 이전 items 배열에서 key가 1인 항목의 name이 Orange에서 Apple으로 변경되었기 때문에, 해당 항목의 실제 DOM 노드를 변경하게 됩니다. 나머지 항목은 key와 name이 모두 동일하기 때문에, 해당 항목들의 실제 DOM 노드를 재사용합니다.

 

이러한 최적화로 인해 불필요한 DOM 조작을 줄이고, 성능을 향상시킬 수 있습니다.

불필요한 렌더링을 방지함으로써 성능이 개선되고, 사용자 경험을 향상시킬 수 있습니다. 또한, 이를 통해 코드의 재사용성이 높아지고, 유지보수가 용이해집니다.

++) 재조정은 선언적 프로그래밍의 이점을 제공합니다. 상태(state)와 프로퍼티(props)를 이용하여 어떻게 뷰를 표시할지 선언하고, 리액트가 알아서 처리해주기 때문에 코드를 직접 작성할 필요가 없습니다. 이로 인해 코드의 가독성이 향상되고, 작성할 코드 양이 줄어듭니다.