reflow 썸네일형 리스트형 JSX 문법에서 왜 여러 Element 들은 하나의 최상위 element에 감싸져 랜더 되어야 하는건가? Virtual DOM에서 컴포넌트 변화를 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다. const Categories = () => { return ( // ( onSelect(c.name)} > {c.text} ))} ); }; export default Categories; 그럼 왜 Virtual DOM은 컴포넌트 변화를 효율적으로 비교하기 위해서, 하나의 DOM 트리 구조가 요구 되는 걸까? Element가 30개가 바뀌었다고 reflow를 30번씩 새로 하는 것이 아니라 모든 변화를 하나로 묶어서 딱 한번만 실행시키기 위해서 - 즉 reflow를 최소화 시키기 위해서 더보기 이전 1 다음