dom4 DOM 이란? & React와 ReactDOM 차이 🔥 DOM 이란?문서객체모델(Document Object Model)이다문서 객체란? : 이나 같은 html문서의 태그들을 JavaScript가 이용할 수 있는 객체(object)로 만드는 것(HTML 문서를 객체화한 것)을 문서 객체라고 한다DOM은 HTML, XML 문서의 프로그래밍 interface이며, 개발자가 작성해 놓은 HTML문서를 브라우저가 해석해서 만들어 놓은 것이다쉽게 말하면 DOM은 Javascript로 html을 조작하기 위해 존재한다 그렇다고 해서 html을 직접 조작하는 것은 아니고, dom을 접근해 조작함으로써 html에 변화가 일어난다DOM 접근document.querySelector('title')DOM 조작document.querySelector('title').i.. 2024. 7. 13. 리액트[기초] Virtual DOM DOM 이란? Document Object Model의 약어이다 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성한다 웹 브라우저는 DOM을 활용해 객체에 자바스크립트와 CSS를 적용하는데 DOM은 트리 형태라서 특정 노드를 찾거나 수정, 제거, 삽입이 가능하다 Virtual DOM 실제 DOM에 접근하여 조작하는 대신 이를 추상화한 자바스크립트 객체를 구성하여 사용한다 리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트할 때 3가지 절차가 있다 1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리 렌더링 한다 2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다 3. 바뀐 부분만 실제 DOM에 적용한다 2022. 5. 24. 리액트[기초] 초기 렌더링 과 조화 과정 렌더링 이란? 사용자 화면에 view를 보여주는 것을 말한다 초기 렌더링이란? 어떤 UI 관련 프레임워크, 라이브러리를 사용하던지 간에만 처음에 어떻게 보일지 정하는 초기 렌더링이 필요하다 리액트에서는 초기 렌더링을 다루는 함수 render 가 있다 render 함수란? 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다 html 형식의 문자열을 반환하지 않고 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환한다 render 함수를 실행하면 그 내부에 있는 컴포넌트들도 재귀적으로 렌더링 한다 최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업을 만들고 이를 우리가 정하는 실제 페이지의 DOM요소 안에 주입한다 조화 과정 이란? 리액트에서 뷰를 업데이트할 .. 2022. 5. 24. [error] TypeError: Cannot set properties of null (setting 'innerText') 에러를 만나게 된 상황 //코드일부(필요없는 부분 생략...) const weather = document.querySelector(".weather"); let temp = data.main.temp; let min = data.main.temp_min; let max = data.main.temp_max; weather.innerText = `${temp}°C 최고온도${max}°C 최저온도 ${min}°C` 날씨 위젯 개인 프로젝트를 진행하던 중 온도와 최고온도, 최저온도를 변수에 담고 innerText를 사용해 출력하고 싶었는데 TypeError: Cannot set properties of null (setting 'innerText') 에러가 났다 해결방법 script 태그를 head 태그안에.. 2022. 4. 30. 이전 1 다음 728x90