개발기록

React는 직접 DOM을 조작하는 것이 아니라 (명령형: document.querySelector('#alert-badge').textContent = 4) Virtual DOM(가상 DOM)을 통해 '상태의 변화'를 감지하여 변화된 부분의 DOM만 변경한다. 기존의 명령형(event 발생마다 직접 UI 값을 변경해주는) 웹 개발 패러다임에서 선언형 웹 개발 패러다임으로 넘어오게 된 1등 공신이 React다. 명령형 패러다임에서의 문제는 상태가 바뀌는 경로가 늘어날 때마다 갱신해야하는 DOM 조작이 곱절로 증가한다. React(선언형) 패러다임은 이렇게 정의한다. UI = function(state). 상태가 이럴때는 화면이 이렇게 생겨야한다는 선언. 실제로React가 하는일 2가지는?1. 컴포넌트를..

JSX는 그냥 객체가 된다 위 코드가 컴파일 되면 React.createElement("canvas", { id: "canvas", width: 800 });// 결과는 평범한 JS 객체가 됨// { type: "canvas", props: { id: "canvas", width: 800 }, ... } 컴파일 결과는 단순한 JS 객체가되는 것이지, DOM이 아닙니다. 브라우저는 이 객체를 전혀 모르는 상태입니다. 이 객체는 작고, 가볍고, 만들고 버리는 비용이 0 이 됩니다(DOM 조작보다 훨씬 저렴함). 이걸 React Element라고 부릅니다. React를 쓰는 앱의 전체 그림가장 낮은 1층: React Element { typ: "canvas", props: {...} }매 렌더링마다 새로 ..