1) 사건의 발단
회사 동료가 질문을 해왔다. 그 질문이 뭐였냐 하면,
현재 우리가 진행하는 프로젝트 상에서 테이블을 띄워주는 library로 AGgrid를 사용하고 있다.
근데 이 AG grid의 함수들을 사용하는 방법이 두가지다.
1번이 gridRef를 통해 DOM 자체를 참조하여 해당 Grid DOM의 API를 끌어다쓰는 방법이고
2번이 해당 Grid DOM 의 gridApi 자체를 State에 set해두고 그 State를 사용하는 방법이다.
여기서 동료가 모르곘다는 부분은 DOM 이 이해가 가지 않는다는 것이었다.
그래서 설명해준 그대로 블로그 글도 써두기로 했다.
2) DOM이란?
우리는 사실 DOM이라는 말은 진짜 많이 들어봤다.
React에 대한 내용을 조금이라도 들어봤다면 Virtual DOM 이라는 용어를 접하게 되기 때문이다.
하지만 문제는 React를 처음 사용하는 사람은 둘째치고 Front 코드 자체를 아예 처음 작성해본 사람이라면 당연히 모를 법하다는 것이다.
DOM 은 Document Object Model의 줄임말이다.
사전적인 정의는 "XML / HTML에 접근하기 위한 일종의 인터페이스"
위의 인터페이스 같은 말은 아예 모르는 사람들에겐 어지러울 뿐이니 처음 아무것도 모르던 나의 이해방식대로 설명하겠다.
문서 객체 모델 이라는 말로 내가 처음 해석했던 의미는 화면에 뿌려지는 요소(객체)들을 문서의 형태로 표현하는 모델이었다. 자 조금 더 이해하기 쉽게 설명해보자.
웹 어플리케이션 개발에 있어서 우리가 화면에 동적으로 사용자와 상호작용하는 UI를 보여주기 위해서는 세가지의 요소가 필요하다. HTML, CSS, JavaScript
그럼 여기서 위의 정의에 가장 부합할 것 같은 것이 뭘까?
바로 HTML이다. HTML은 하나의 문서의 형태를 띄고 있고, <body>태그 내에서 화면의 뿌려지는 요소들을 정의하는 역할을 한다.
그리고 이 HTML로 정의된 요소들을 CSS로 보기좋게 만들고, JS를 통해 상호작용하도록 만드는 것이다.
그렇다면 아주 좁은 의미에서 DOM === HTML의 <body>태그가 포함하고 있는 요소들, 그 요소들에게 접근하기 위한 수단이라고 말할 수 있겠다.
더 쉬운 이해를 위해서 간단한 코드를 작성해 콘솔에 찍어보는 방법이 있는데, DOM을 확인하기 위해서 특정 HTML 요소를 가져와보도록 하자.
const title = document.querySelector('#title');
console.dir(title)예를 들어 위의 코드처럼 title이라는 id 가 지정 되어있는 HTML 요소를 불러왔다고 가정해보자. 그리고 요소를 Object 형식으로 찍어주는 console.dir() 로 확인 해보면,
콘솔에 이런 식으로 DOM을 확인할 수 있다.
3) DOM을 제어한다?
그럼 이 DOM을 제어한다는 의미도 이해하기가 쉬워진다.
DOM에 정의 되어있는 요소들을 보여줄지 안보여줄지, 원하는 데이터가 들어있는 시점까지 어떻게 이동시켜줄지 등등
이러한 행위들 모두가 DOM 을 제어한다는 영역에 들어가 있는 것이다.
대표적인 예시로 들 수 있는 것이 국비지원학원에서 갓 나온 친구들도 알고 있는 "getElementById" 이다.
특정 태그의 id값을 통해 DOM을 지정하고 그 요소를 변수에 담아 여러가지 동작을 하도록 만들어 봤을 테니 말이다.
4) 최초의 질문으로 돌아가서
그렇다면 앞선 저 GridApi를 사용하는 것에 대한 궁금증을 해결해낼 수 있다.
사실 두가지 방법 모두 DOM에 접근하는 것은 맞다. Ref를 사용해서 DOM에 접근하게 되면 API뿐만 아니라
해당 Grid DOM이 지니고 있는 모든 요소들을 확인 할 수 있을 것이다. 하지만 State에 API를 Set해주는 방식은
DOM에 접근을 하되, API만을 State에 담아주도록 하여 DOM의 다른 요소들은 배제하고 API만을 확인 할 수 있을 것이다.
이런 부분에서 사용방법의 차이가 있는 것이다.
'Dev > Basic' 카테고리의 다른 글
| [Git] Git (0) | 2023.06.12 |
|---|---|
| [HTTP] HTTP (0) | 2023.04.27 |
| [REST] REST API (0) | 2023.04.27 |
| [REST] REST (0) | 2023.04.26 |
| [Arch] MSA || Monlolithic (0) | 2023.04.18 |