Study/React

[React] React와 Vanilla JS 개발의 차이점

React와 Vanilla JS 개발의 차이점 Vanilla JS React 사용자 인터페이스 HTML 요소로 구현 컴포넌트 단위로 요소 구현 기능 및 요소 유지 관리 HTML와 JS 파일 두 개로 유지 관리 파일 하나로 유지 관리 코드의 재사용 가능 데이터 변경 전체가 리렌더링 변경된 부분만 리렌더링 React의 장점 공식 문서 가이드와 커뮤니티나 자료가 많아 쉽게 접하고 배울 수 있음 컴포넌트 단위로 나누어 관리하여 역할과 기능에 따라 관리할 수 있어 용이함 UI 수정과 재사용성이 좋으며, 코드 가독성을 높일 수 있음 다른 프레임워크나 라이브러리와 병행하여 사용 가능 데이터가 변경되면 DOM 전체를 리랜더링하는 것이 아닌 변경된 부분을 체크하여 변경된 부분만 렌더링되어 속도가 빠름

[React] 가상 돔(Virtual DOM)

DOM 이란? DOM은 Documnet Object Model의 줄임말로, 웹 페이지를 이루는 태그들을 JS가 이용할 수 있도록 브라우저가 트리 구조로 만든 객체 모델을 말한다. 그대로 풀어서 해석하면 문서 객체 모델인데, html, head, body와 같은 태그들을 JS가 메모리에 보관하고 이용할 수 있는 객체인 것이다. 간단히 말해서 DOM은 HTML와 스크립트 언어를 서로 이어주는 역할을 하게 되는 것이다. JS는 HTML 태그들에게 Document라는 전역 객체를 통하여 접근해 조종한다. window라는 객체는 Document라는 전역 객체 상위에 위치해 있다. 보통 본인은 HTML 이나 React 작업을 시작하기 전, 페이지의 DOM 트리 구조를 그려 본 후에 시작한다. 그렇게 하면 좀 더 체..