React의 Virtual DOM이 자식 요소들을 중첩 배열이 아닌 1차원 배열로 "평탄화(flatten)"하는 이유는 단순히 구현상의 편의를 넘어서, 성능 최적화와 예측 가능한 렌더링을 달성하기 위한 핵심 전략 중 하나입니다. 이 문서에서는 그 이유를 세 가지 측면에서 단계적으로 정리합니다.
1단계: 빠르고 효율적인 비교(Diffing Algorithm)를 위해
React는 상태(state)나 props가 변경되었을 때, 이전 Virtual DOM과 새로운 Virtual DOM을 비교(diff)하여 변경된 부분만 실제 DOM에 반영하는 재조정(Reconciliation) 과정을 거칩니다.
이 때 사용하는 알고리즘이 바로 Diffing Algorithm이며, 이는 다음 조건을 충족해야 성능이 극대화됩니다:
- 순차적으로 빠르게 비교할 수 있어야 함
- 최소한의 재귀 사용
key를 통한 변경 감지 가능
문제: 중첩 배열 구조의 비교는 느림
const children = [child1, [child2, child3], child4];
이런 구조라면 비교 알고리즘은 다음과 같이 복잡한 과정을 거쳐야 합니다:
children[0]은 단순 비교children[1]은 배열 → 다시 내부를 순회해야 함 (재귀 호출)- 성능 비용 증가, 예측 어려움
해결: 1차원 배열로 평탄화
const children = [child1, child2, child3, child4];
이렇게 만들면:
- 처음부터 끝까지 한 번만 순차 비교 가능
- 재귀 필요 없음
key를 기준으로 변경된 요소만 빠르게 탐지 가능
✅ 요약: 중첩 배열 → 재귀로 느림, 평탄 배열 → 순차 비교로 빠름
2단계: JSX의 유연성과 실제 DOM 구조의 간극 해소
JSX에서는 다음과 같은 유연한 표현이 자주 사용됩니다:
<ul>
{[<li>첫째</li>, items.map(item => <li>{item}</li>)]}
</ul>
이 경우 children은 다음처럼 중첩 배열이 됩니다:
[ <li>첫째</li>, [<li>둘째</li>, <li>셋째</li>] ]
하지만 실제 DOM 구조는 중첩 배열을 허용하지 않습니다. HTML의 부모-자식 관계는 항상 1차원 목록입니다. <ul> 태그 안에는 직속 자식 <li> 요소들이 평평하게 나열되어야 합니다.
React는 Virtual DOM이 실제 DOM 구조를 모방해야 하므로, 중첩 구조를 정규화(normalize)하여 평탄한 배열로 변환합니다.
✅ 요약: JSX는 중첩 배열을 쉽게 만들지만, 실제 DOM은 평탄 구조만 허용함. 따라서 Virtual DOM도 이를 따라야 함
3단계: 가상돔 내부 로직의 단순화
Virtual DOM은 비교 외에도 여러 내부 처리를 수행합니다:
null,false,undefined등의 필터링- 문자열을 텍스트 노드로 변환
React.Fragment등 특수 케이스 처리
이 모든 로직에서 children이 중첩 배열이면 다음과 같은 복잡한 분기문이 필요합니다:
if (Array.isArray(child)) {
child.forEach(recurse);
} else {
process(child);
}
하지만 createElement 단계에서 이미 평탄화된 1차원 배열을 만들면:
- 이후 모든 처리에서
for (let child of children)같은 단순 루프로 처리 가능 - 재귀 로직 최소화
- 예측 가능한 동작 보장
✅ 요약: 미리 평탄화하면 이후 모든 처리 과정이 단순, 안정, 예측 가능
결론: 평탄화는 Virtual DOM 최적화의 핵심 설계 원칙
React의 Virtual DOM에서 자식 목록을 평탄화하는 것은 다음과 같은 React의 철학과 맞닿아 있습니다:
- 성능(Performance): 선형 비교를 가능하게 함
- 예측 가능성(Predictability): 항상 일정한 구조로 동작함
- 표준과 일치(DOM 구조에 부합): 실제 브라우저 동작과 모순 없음
- 유지보수성(Maintainability): 내부 구현을 단순화함
이를 통해 개발자는 JSX의 자유도를 누리면서도, React 내부에서는 고도로 최적화된 렌더링 파이프라인이 작동하게 됩니다.
참고 자료
- [React] Virtual DOM 정리 - velog https://velog.io/@party3205/React-Virtual-DOM-%EC%A0%95%EB%A6%AC
- [React] 가상 돔(Virtual DOM)이 무엇이고 왜 중요할까요? https://yong-nyong.tistory.com/80
- 리액트의 작동 원리와 장단점에 대해 2 - velog https://velog.io/@yesoryeseul/%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%9D%98-%EC%9E%91%EB%8F%99-%EC%9B%90%EB%A6%AC%EC%99%80-%EC%9E%A5%EB%8B%A8%EC%A0%90%EC%97%90-%EB%8C%80%ED%95%B4-2
- Virtual DOM 을 왜 빠르다고 하는가 https://dont-stay-hungry.tistory.com/3
- [React] Virtual DOM과 리랜더링, 재조정 - 티스토리 https://uiop5809.tistory.com/155
- [React] 가상돔 Virtual DOM이란? - 개발자 시니 - 티스토리 https://dev-cini.tistory.com/11
- 7주차 : 리액트에서의 Virtual DOM의 의미, 사용 이유 https://20002100.tistory.com/entry/7%EC%A3%BC%EC%B0%A8-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C%EC%9D%98-Virtual-DOM%EC%9D%98-%EC%9D%98%EB%AF%B8-%EC%82%AC%EC%9A%A9-%EC%9D%B4%EC%9C%A0
- React의 Virtual DOM - 느릿느릿 개발자 - 티스토리 https://klmhyeonwooo.tistory.com/64
