개발자, 특히 프론트엔드 개발자라면 DOM에 대해서 많이 들어봤을 것이다
가상DOM이니, 리액트를 사용할 땐 DOM에 직접 접근하지 마라... 등등
DOM이 뭔지 몰라도 html을 작성하고 프레임워크를 사용해서 웹페이지를 만드는데 아무런 지장이 없다
하지만, DOM이 뭔지 모르고 넘어간다면 앞으로의 개발 인생이 찝찝할 것
DOM(Document Object Model)은 말 그대로 Html 텍스트(Document)를 객체화(Object)한 모델이다
왜 객체화 시켜야하냐고 한다면, Html 텍스트로 휘뚜루마뚜루 적는다고 그게 갑자기 웹사이트가 되는 것이 아니기 때문이고,
브라우저에게 이것좀 만들어달라고 해야해서, 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재해야 함
브라우저가 이해할 수 있는 구조 = DOM
DOM은 트리구조를 이루고 있으며, 모두 객체화 되어있기 때문에 우리는 자바스크립트 명령어를 이용해서 이 DOM에 접근할 수 있게 된다
말했듯이 홈페이지가 아무런 변화가 없는 단순한 페이지라면 DOM에 접근이건 수정이건 할 필요가 없을 건디
그런 페이지가 세상에 어디있겠나 싶다
버튼을 클릭했을 때 뭔가 바뀌게 하고 싶다면, 우리는 페이지를 구성하고 있는 html을 수정해야 할 것이다
근데 사용자가 버튼을 누르기를 실시간으로 지켜보며 기다리고 있다가, 누르자마자 html을 수정해서 배포를 하는 일은 없으니까
우리는 이벤트를 통해서 페이지의 변화를 주게 되는데,
버튼을 누르면 h2 태그의 내용을 "아반떼 사주세요!"로 바꾼다고 생각해보면
버튼을 누르는 이벤트가 발생하면 DOM 트리에서 h2태그를 찾고, 그 내용을 바꿔주면 되지 않을까?
이렇게 페이지의 내용을 동적으로 변경 시켜주고 싶은데,
그러려면 이 웹페이지를 구성하고 있는 것들이 실체가 있는 객체여야 하기 때문에 DOM을 만드는 것이고,
우리는 그것을 수정하게 되는 것이다
프론트엔드 개발을 한다면 정말 DOM을 지지고 볶고 다하는데,
리액트를 사용해왔다면 직접 DOM을 건드리는 document.getElementById 이런 메서드를 사용한 적이 거의 없을 것이다
리액트에서는 직접 DOM에 접근하는 것을 지양하기 때문
근데 리액트와 같은 프레임워크를 사용하여 SPA(Single Page Application)을 구현했다고 해보자
SPA는 겉보기에 새로고침이 발생하지 않고, 다른 페이지로 이동(라우팅) 혹은 내용 변경이 가능한 어플리케이션을 말하는데,
페이지를 구성하고 있는 내용이 바뀐다?
엥? DOM을 건드리고 있는 거 아님??
정확히 말하면 바꿔끼고 있다고 생각하면 편하다
왜냠 리액트에서는 가상DOM이라고, DOM의 복사본을 떠놓고 바뀌면 비교해서 바뀐부분을 찾아서 어쩌고 저쩌고..
바꿔끼고 어쩌고... 하기 때문...
그러니까 DOM을 직접 건드리지 말라는 말은,
가상DOM을 건드리고 있는데, 직접 DOM을 또 건드린다? 어디서 문제가 생긴지 디버깅도 쉽지 않고 일관성이 깨짐
(ref나 effect를 통해서 탈출하여 건드리자)
그래서
DOM은 Html을 우리가 씹고 뜯을 수 있도록, 상상 갈비에서 진짜 갈비로 만든거고
Tree 형태의 구조를 띄고 있으며, 자바스크립트 명령어로 직접 접근하여 속성, 내용을 변경할 수 있다
끝
