Virtual DOM과 Real DOM의 차이점
가상 돔과 실제 돔의 차이에 대해 답변 드리겠습니다.
먼저 실제 DOM입니다.
첫째, 실제 DOM은 HTML 문서의 직접적인 표현으로서, 브라우저가 웹페이지를 렌더링 할 때 HTML 문서의 각 요소들이 메모리에 구성된 객체로 표현되는데, 이를 실제 DOM이라고 합니다.
둘째, 웹페이지의 한 부분이 변경되면 해당 부분을 다시 렌더링하고 업데이트합니다. 모든 변경된 부분을 실제 DOM에서 업데이트 하므로 성능 이슈, 비효율성이 발생할 수 있습니다.
가상 DOM에 대해 답변 드리겠습니다.
첫째, 가상DOM은 실제DOM의 가벼운 복사본입니다. 변화가 있는 부분만 메모리에 존재하며, 이를 통해 렌더링 성능 향상이 가능합니다.
둘째, 변경이 필요한 부분은 가상 DOM에 업데이트 되고, 그 후 비교 알고리즘을 사용해 변경 부분만 찾아 실제 DOM에 적용합니다.
셋째, 전체 문서를 리렌더링 하는 것이 아니고 변경 부만 업데이트 하므로 성능이 향상될 수 있습니다.
넷째, React, Vue.js 등의 라이브러리에서 가상 DOM을 사용해 성능을 최적화 합니다.
가상 DOM은 실제DOM 조작을 최소화 하고, 렌더링 성능을 개선하여 사용자 경험을 향상시키는 데 도움이 된다고 말할 수 있습니다.
Recoil의 특징, Redux와의 차이점
Recoil의 특징
첫째, 애플리케이션 전역 상태를 Atoms 라고 불리는 단위로 관리합니다. 이 원자 상태는 여러 컴포넌트에서 읽고 쓸 수 있습니다.
둘째, React의 함수 컴포넌트에서 선언적으로 상태 정의할 수 있도록 지원합니다.
셋째, 비동기적으로 데이터 가져올 수 있도록 설계되어 있습니다.
넷째, 상태를 공유함으로써 컴포넌트 간 느슨한 결합을 촉진합니다. 상태 변화 시 컴포넌트 간 더 쉽게 데이터 공유가 가능합니다.
Redux와의 차이점
첫째, Redux는 단일 상태 트리이지만 Recoil은 여러 개의 원자를 사용하고, 상태를 더 작은 단위로 분리도 가능합니다.
둘째, Redux는 액션, 리듀서, 스토어 등 많은 보일러 플레이트 코드를 필요로 하지만 Recoil은 적은 양의 코드로 상태 관리가 가능합니다.
셋째, 컴포넌트 간 연결이 느슨하여, 대규모 애플리케이션에서 성능 면 우월성을 가집니다.
넷째, 비동기 상태를 간편하게 다룰 수 있도록 설계되어, 비동기 작업에 유리합니다.
