본문 바로가기

react2

[React] DOM과 Virtual Dom DOM(Document Object Model) HTML(Document)에 접근하여 Object(JavaScript Object)처럼 HTML을 조작할 수 있는 Model이다. 즉, 자바스크립트를 사용하는 방법을 알면 DOM을 활용하여 HTML을 조작할 수 있다. DOM은 위와 같이 HTML Element들을 트리 형태로 표현한 것이다(트리 구조를 가진 객체이다) DOM의 문제점 DOM은 트리 구조를 가지고 있어 이해하기 편하고 탐색하기 쉬운 장점이 있다. 하지만 웹이 크고 복잡해질수록 트리구조도 커지게 된다. 거대해진 DOM 트리에서 변경하고자 하는 노드를 탐색하려고 하면 시간이 많이 걸릴 뿐만 아니라, 노드를 수정하면 거대한 트리를 다시 랜더링 하게 되는 비효율적인 프로세스가 발생하게 된다. 이러한.. 2024. 4. 9.
[React] React의 등장배경 React의 등장 배경 리액트(React) 이전에도 많은 라이브러리/프레임워크가 존재했다.(jQuery, Vue.js, Angular.js 등) 제이쿼리의 경우, 여러 종류의 웹브라우저들마다 자바스크립트를 불러오는 방식이 달라 어려웠던 점을 해결해 주었다. (브라우저들 간에 통일성을 가지도록 도와주면서 많이 사용했다.) 시간이 흐르면서 웹 애플리케이션의 크기가 커지자, 자바스크립트 파일이 넘쳐나면서 통제가 어려워졌고, HTML, CSS, Javascript에서 자바스크립트의 중요성이 점점 더 커지기 시작했다. 그리고 SPA(Single Page Application)이 등장했다. SPA(Single Page Application) 웹 페이지는 모든 페이지마다 HTML, CSS, Javascript 파일을.. 2024. 4. 8.