diff1 바닐라 JS로 리액트 만들기 - 4 이전에 react의 상태관리와 해당 기능을 구현하는것 까지 진행을 했었다.이번에는 리엑트의 가상돔에 대해 알아보고 최대한 비슷하게 구현해볼것이다.React의 가상DOM리엑트에서 가상돔이란 실제돔 요소를 변경하기 전 가상돔에 미리 돔 작업을 실시하고 실제돔에 적용하므로써 돔 조작에 대한 비용을 줄이는 최적화 기술이다.가상돔 실행 순서초기 렌더링컴포넌트가 처음 렌더링 될 때 가상돔을 생성한다.이때 생성되는 돔은 실제돔과 유사한 형태로 자바스크립트 객체로 표현된다{ type:"div", props:{}, children:[]}상태변화컴포넌트의 상태나 속성이 변경되면 변경된 컴포넌트를 가상돔에 리렌더링한다.이 과정에서 새로 랜더링된 가상돔과 이전의 가상돔을 비교한다.diff알고리즘두개의 가상돔을 비교하는 .. 2024. 9. 30. 이전 1 다음