이미 TIL로 정리한 내용이지만 과제 제출용으로 한 번 더 정리하는 Virtual DOM, props, state이다.
DOM의 의미와 특징
-DOM ( The Document Object Model, 문서 객체 모델)은 HTML, XML(Extensible Markup Language) 문서의 프로그래밍 interface이다.
-nodes와 objects로 문서를 표현한다.
-웹페이지의 객체 지향 표현이며, 웹페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.
-DOM은 프로그래밍 언어는 아니지만 DOM이 없다면 자바스크립트 언어는 웹페이지 또는 XML 페이지 및 요소들과 관련된 모델이나
개념들에 대한 정보를 갖지 못하게 된다.
-DOM의 구현은 어떠한 언어에서도 가능하다.
재조정:
UI가 표현된 객체를 메모리에 저장하고, React DOM과 같은 라이브러리에 의해 '실제'DOM과 동기화 하는 과정
1) UI가 변경되면 전체 UI를 Virtual DOM으로 렌더링한다.
2) 현재 Virtual DOM과 이전 Virtual DOM을 비교해 차이를 계산한다.
3) 변경된 부분을 실제 DOM에 반영한다.
props의 개념
-부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터, 다시 말해 컴포넌트 간의 정보 교류 방법.
-props는 반드시 위에서 아래 방향으로 흐른다. 즉 [부모] -> [자식] 방향으로만 흐른다.(단방향)
-props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다.
prop drilling
-데이터가 전달되는 과정이 반복되는 것이 prop drilling, props가 아래로 뚫고 내려간다.라고 한다. 유지/보수 측면에서 곤란하다.
state를 쓰는 목적 => UI를 바꾸기 위함 (렌더링을 다시)
React안에서 변경되는 값은 반드시 state로 선언
리액트는 화면을 렌더링할지를 state의 변화에 따라 결정한다. 단순 변수는 무시한다.
