0. 리액트 프레임워크 (React)의 원리를 파악하자
예전부터 무지성으로 React, Next.js 프레임워크를 달달 암기하면서
프레임워크의 내부는 어떻게 동작하는지 알고 싶었다.
오픈소스로 되어있지만 현재 버전을 들어가서 이해하는 것은 사실상 불가능.
그 방대한 코드를 다 보는 것만으로도 엄청난 양의 시간이 들어간다.
그래서 마침 React를 간접적으로나마 구현해보는 강좌가 있어 듣기로 했고. 정리하고자 한다.
현재 프론트엔드에 쓰이는 라이브러리나 프레임워크로는 Vue.js, JQuery, Angular, React 등이 있다.
되도록 React를 배우라고 하는 이유는 시장에서 가장 수요가 많기 때문이다.
무엇이 우월하고의 차이를 따지기 전에 시장이 어떻게 돌아가고, 얼마나 많은 자료와 커뮤니티가 있는지를 확인하자.
1. DOM API와 그 문제점
Document Object Model (이하 DOM)은 HTML과 상호작용하는 모델이며 이와 소통하는 것이 DOM API 라고 한다.
기본적으로 마크업 형태로 되어있는 문자열을 특정 메서드를 이용하여 객체화 시킬 수 있고, 그것을 동적으로 변경할 수 있는 것을 말한다.
DOM API는 브라우저가 기본적으로 지원하며, 모든 DOM API를 모든 웹 브라우저가 지원할 것이라고 생각하면 안된다.
브라우저 호환성을 체크하자. (하지만 그냥 다 된다고 가정하는 것이..)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>2.1 무엇이 문제인가?</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<input type="text" name="todo" class="form-control" placeholder="할 일을 입력하세요">
</div>
<div class="col-12">
<ul class="list-group">
<li class="list-group-item list-group-flat">
<div class="checkbox">
<input type="checkbox" id="checkbox">
<label for="checkbox">첫 번째 할 일</label>
<button type="button" class="btn btn-outline-secondary btn-sm"></button>
</div>
</li>
</ul>
</div>
</div>
<div class="col-12">
할 일:<span>1건</span>
완료:<span>0건</span>
미완료:<span>1건</span>
</div>
</div>
<script src="app.js" type="module"></script>
</body>
</html>마크업 되어있는 HTML 파일 (index.html)
태그와 그 태그 안의 속성, Attribute와 value가 명시되어있다.
브라우저는 HTML 파일 내의 문자열을 읽어서 DOM이라는 형태로 만들고 그것을 렌더링 프로세스를 거쳐 UI를 완성한다.
아래는 DOM을 통해 HTML를 제어하는 자바스크립트 파일이다.
const list = document.querySelector('.list-group');
const todoContainer = document.createElement('li');
const todoItem = document.createElement('div');
const todoStatus = document.createElement('input');
const todoLabel = document.createElement('label');
const deleteButton = document.createElement('button');
todoContainer.classList.add('list-group-item', 'list-group-flat');
todoContainer.appendChild(todoItem);
todoItem.appendChild(todoStatus);
todoItem.appendChild(todoLabel);
todoItem.appendChild(deleteButton);
todoItem.classList.add('checkbox');
todoStatus.setAttribute('id', 'checkbox');
todoStatus.setAttribute('type', 'checkbox');
todoLabel.setAttribute('for', 'checkbox');
todoLabel.textContent = '첫 번째 할 일'
deleteButton.classList.add('btn', 'btn-outline-secondary', 'btn-sm');
deleteButton.textContent = 'X';
list.appendChild(todoContainer);
여기서 DOM의 문제점이 나온다.
첫째, 구조를 쉽게 파악하기 어렵다. 계층 구조가 잘 보이지 않기 때문에 한 눈에 구조를 확인할 수 없다.
둘재, DOM API를 사용하지 않으면 HTML을 바꾸기가 어렵다. 독점적인 상점이라고 할까.
React는 이런 DOM의 문제를 다른 방식으로 바꿔보려고 한다.
DOM은 개발자가 제어하는 것이 아니라, React 프레임워크가 직접 제어하는 방식으로 한다.
그리고 쉬운 부분은 개발자에게 위임한다.
어떤 소프트웨어는 HTML을 문자열로 바꾸고, 나머지 소프트웨어는 훨씬 다루기 쉽게 객체(Object)로 바꾸는 과정을 진행한다.
DOM API를 다루기 까다로우니까 사용자에게 훨씬 다루기 쉬운 소프트웨어를 제공한다. 그것이 React이다.
DOM은 워낙 메서드와 속성이 많다. 복잡한 객체라는 것이다.
이것을 간단한 객체로 바꿔보는 것이 필요하다.
2. 간단한 객체로 변경 후 DOM을 그린다(Render)
위의 HTML 파일을 보면 몇 가지 특징이 보인다.
(1) 태그가 자식을 가지고 있을 수 있다.
(2) 자식은 N개를 가질 수 있고, 자식은 또 자식을 가질 수 있다.
(3) 태그는 태그의 이름과 attribute와 value를 가지고 있다.
이 세 가지는 모든 태그에서 해당되며, 태그명이 바뀐다고 해도 다르게 적용되지 않는다. 공통적인 속성이라는 뜻이다.
< 참고자료 >
1. DOM과 DOM API란?
https://developer.mozilla.org/ko/docs/Glossary/DOM
DOM - 용어 사전 | MDN
DOM (Document Object Model) 은 HTML 또는 XML (en-US) document와 상호작용하고 표현하는 API입니다. DOM은 browser에서 로드되며, 노드 트리(각 노드는 document의 부분을 나타냅니다)로 표현하는 document 모델입니다
developer.mozilla.org
2. DOM API 브라우저 호환성 체크
Document - Web API | MDN
Document 인터페이스는 브라우저가 불러온 웹 페이지를 나타내며, 페이지 콘텐츠(DOM 트리)의 진입점 역할을 수행합니다. DOM 트리는 <body>와 <table> 및 여러 다른 요소를 포함합니다. Document는 페이지
developer.mozilla.org
끝!