DOM(문서개체모델) 이란?
사용자가 웹페이지에 접근하면 서버는 해당 API에 등록된 HTML파일을 브라우저(크롬,엣지 등)에 반환한다.
그럼 브라우저는 DOM(문서 개체 모델)을 구성해서 HTML파일에 담긴 내용들을 담고 렌더링 해서 사용자는 웹페이지를 눈으로 볼 수 있다.
DOM은 HTML과 UI 사이에 다리 역할을 하면서 서로 상호작용한다.
JavaScript로 렌더링 실습
- vs코드와 같은 편집기를 이용해서 index.html 파일을 만든다.
- 아래 코드를 입력한다.
- 저장하고 index.html파일으 브라우저로 열면 아래와 같은 화면이 그려질것이다.
F12를 눌러 개발자모드로 들어간 뒤 요소를 클릭하면 적었던 코드와 비슷한걸 볼 수 있는데, 저 요소에 적힌게 DOM이다.
JavaScript로는 H1요소를 생성하고 텍스트 노드를 생성하고 텍스트를 삽입했는데 DOM 을 조회하면 H1 요소가 포함되어 있는걸 볼 수 있다.
명령형 프로그래밍 vs 선언형 프로그래밍
위에 작성한 index.html 파일은 명령형 프로그래밍의 예시이다.
컴퓨터가 어떻게 해야하는지 개발자가 한줄씩 입력해뒀기 때문이다.
명령형 프로그래밍은 요리사에게 피자레시피를 모두 알려줘서 피자를 만드는것이고 선언형 프로그래밍은 레시피 없이 그냥 피자를 주문하는것과 같다.
리액트
리액트는 선언형 프로그래밍 방식으로 구성되었다.
결론
둘 중 더 리액트 동작방식에 가까운것은?
소갈비찜 레시피
1번 방법
- 소갈비는 5cm 정도 길이로 토막 내 찬물에 담가 핏물을 빼고 건져 기름기를 떼고 간이 잘 배도록 군데군데 깊숙하게 칼집을 넣어주세요~
- 무는 큼직하게 깍둑 썰고 밤은 속껍질을 벗기세요~
- 은행은 겉껍질을 벗기고 기름 두른 팬에 볶아 속껍질을 벗겨주세요~
- 양념장에 넣을 배 즙은 강판에 갈아 거즈에 걸러 놓으세요~
- 핏물 뺀 갈비를 큼직한 냄비에 담고 잠길 정도로 물을 부어 한 번 끓어 오를 때까지 한소끔 삶아 건지세요~
- 찜 할 양념장을 만드는데 오래 끓여 국물이 졸아들면 짜지므로 약간 심심하게 만드는 것이 좋아요~
- 삶아낸 갈비에 양념장의 2/3만 넣고 육수를 부어 고루 섞이도록 뒤적인 다음 한소끔 끓이고 찜 국물이 끓기 시작하면 무, 밤, 대추, 은행을 한데 담고 남은 양념장을 고루 끼얹어 가면서 버무려 주세요~
- 7)을 조리듯 쪄 내는데 맛이 들면 찜기에 담고 지단을 얹어 내면 됩니다~^^
2번 방법
- 소갈비찜 한접시 주세요 ^^
2번 방법이 리액트의 동작 방식(선언형 프로그래밍)이고 1번 방식이 방금 했던 명령형 프로그래밍의 방식이라고 생각하면 된다
