JSX 문법에서 왜 여러 Element 들은 하나의 최상위 element에 감싸져 랜더 되어야 하는건가?

• Virtual DOM에서 컴포넌트 변화를 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다.

const Categories = () => {
  return (
    <CategoriesBlock> // <-- 최상위 한개의 Element
      {categories.map((c) => (
        <Category
          key={c.name}
          active={category === c.name}
          onClick={() => onSelect(c.name)}
        >
          {c.text}
        </Category>
      ))}
    </CategoriesBlock>
  );
};

export default Categories;

• 그럼 왜 Virtual DOM은 컴포넌트 변화를 효율적으로 비교하기 위해서, 하나의 DOM 트리 구조가 요구 되는 걸까?
  • Element가 30개가 바뀌었다고 reflow를 30번씩 새로 하는 것이 아니라 모든 변화를 하나로 묶어서 딱 한번만 실행시키기 위해서 - 즉 reflow를 최소화 시키기 위해서