DOM과 가상DOM(Virtual DOM)
: DOM은 document를 자바스크립트가 이해하여 html에 접근해서 동적으로 변화시키도록 object로 나타낸 것이다. 브라우저에 기본적으로 내장되어있는 API이기 때문에 javascriptr가 html에 접근하여 제어할 수 있는 것이며, Dom tree로 구성되어 있다.
가상 DOM은 DOM의 메모리 내 표현으로, 실제 DOM과 구조가 같지만 (getElementById와 같은)API가 없다. 그러므로 DOM보다 가벼워서 렌더링이 빠르다는 특징을 가지고 있다.
DOM을 반복적으로 조작하게 되면 비효율적으로 렌더링이 되는 문제가 있다. 그래서 SPA에서 DOM을 조작하게 되면 복잡도가 증가하며 다루는게 힘들어진다. 이러한 이유로, React환경에서는 가상 DOM을 사용하는데, 변경되는 수정사항들이 생기면 실시간으로 update하는 것이 아닌, 가상DOM이 이를 탐지하여 변경하고, 최종적으로 수정된 부분만 한번에 모아서 DOM에 batch update하므로(비동기) 결과적으로는 렌더링이 한번만 일어나게 되어 효율적으로 렌더링 될 수 있다.
런타임환경 2가지
: node.js , 웹 브라우저
불변성이란 ? ( react에서 불변성이 중요한 이유 )
: 데이터의 변하지 않는 속성으로, 리액트는 메모리의 변화여부를 참조값을 기준으로 비교하기 때문에, 리랜더링 조건과 연결되므로 불변성은 리액트에서 특히나 중요한 속성이다. 참조값이 변하지 않으면 리액트는 변화를 감지하지 않아 랜더링 되지 않는다. 그래서 이 불변성을 지키기 위해서 배열에서도 기존의 배열을 직접적으로 수정하는 것이 아닌, map이나 filter를 이용해서 새로운 배열을 return하도록 한다.
export와 export default 차이점
: export는 일반적으로 내보내는 것이고 여러개를 내보낼 수 있지만, export default는 대표적인 함수 하나를 내보내는 것이다.
import 방식에서 차이가 있는데, export로 내보내는 친구들을 {}에 감싸서
import {...} from ... 의 유형으로 import 하지만, export default로 내보낸 친구는 import ... from ... 와 같이 {}없이 import 한다.
