-
TIL DAY6 220724 리액트 입문주차 2TIL 2022. 7. 24. 23:07
오늘도 황금같은 일요일이므로 황금같이 쓰기로했다
일요일은 내가 원하는 공부를
조금 더 할 수 있는 시간이기때문에
강의 들으면서 그냥 넘어갔던 것인 DOM에 대해서
알아보기로 했다
리액트 강의를 처음 접했을때 배우게 되는 것은
리액트를 구성하는데 가장 기본이 되는
컴포넌트부터
DOM이란 무엇인가
라이프사이클은
어떻게 되는가를
배우고 있는데 확실히는 모르겠어도
일단 넘어가면서 듣고 있는데
도무지 알 수 없는 외계어들이 속출했다. ㅎㅎ
때문에 나의 프론트엔드 인생에서 스승님이라고 생각하는
html, css, javascript를 생초보자에 맞게
너무 설명을 잘해주셔서 처음으로 이해하게 되었었다.
그 기억이나서
유튜버 '유노코딩'님의 채널에서 찾아봤다
DOM이란?
먼저 DOM을 이해하고 싶어서 찾아보는데
역시나 올려놓으신게 있어서 살펴봤다.
먼저 랜더링은 브라우저에서 코드를 해석하고난 후
해석한대로 화면에 띄워주는 것을 랜더링이라고 한다.
그리고 그 랜더링을 하는 과정 안에서
브라우저가 HTML 코드를 해석할 때 요소들을 트리 형태로
구조화해 표현하는 문서(데이터)를 생성한다.
이를 DOM이라 한다.
한마디로 html문서가
<html> <head> </head> <body> <div> <p></p> </div> </body> </html>다른 코드들과 다르게 요소안에 요소가
감싸져있는 형식이라서 가능한 것이다.
HTML 코드를 브라우저로 넘기면
=> 브라우저 나름대로 해석해서 트리형태로 노트필기하듯이 정리를하는 것이다.
=>그 노트필기한 것이 DOM이라는 문서
=>이 정리한 노트필기한 페이지인 DOM을 토대로 웹콘텐츠들을 랜더링한다.
그래서 이 DOM형태는
트리구조
DOM트리구조 마치 회사 조직도 표현하듯이
관계를 트리구조로 표현하면
가지가 자라나듯이
body - div - h1,ul - li
이런 식으로 div의 부모요소는 body
ul과 h1은 형제요소
h1,ul의 부모요소는 div인 것이다.
DOM을 왜 만들까??
바로 해석해서 나타내면 될 텐데
왜 굳이 만들어서 헷갈리게 만드느냐..?!!!
이유는 HTML을 읽고 DOM페이지로 만들어서 화면에 표시하는 과정이 있을때
이 DOM페이지에서
javacript를 이용한 웹콘텐츠 추가, 수정, 삭제 그리고
이벤트처리(마우스클릭, 키보드타이핑) 등을 정의하기 위한
프로그래밍 인터페이스
자바스크립트가 어떤 동작을 구현하고 나면
DOM에 반영되어 작성되고
그 DOM을 다시 랜더링한다.
이런 흐름을 위해
DOM을 쓰는 것인데
html코드는 정적인 텍스트이므로
웹 화면이 동적인 상호작용을 하기위해서는
DOM이 그 역할을 대신해준다.
'TIL' 카테고리의 다른 글
TIL DAY 8 220726 react 입문 Week (0) 2022.07.26 TIL DAY 7 220725 리액트 입문주차 (0) 2022.07.26 TIL DAY5 220723 리액트 입문 시작 (0) 2022.07.24 TIL DAY 4 220719 (0) 2022.07.19 TIL DAY 3 220718 알고리즘 (0) 2022.07.19