프로젝트를 완성시키기에 급급해 제대로 숙지 하지 못하고 지나온 부분들이 너무 많아 다시 시작하는 react 공부 !!!!!!
벨로퍼트와 함께하는 모던리액트 를 보고 작성중입니다.
react는 어쩌다가 만들어졌을까?
: 바닐라 자바스크립트를 이용하면, DOM을 변형시키기 위해선 많은 작업들과 코드들이 필요했다 .
<button id="button">버튼이다</button>
const button = document.getElementById('button');이런식으로 태그에 id값을 부여하고 , 그 id를 가지고 있는 태그를 document.getelementbyid로 접근하여야 했었다.
사용자와 상호작용이 많지 않은 웹이라면 상관없겠지만, 사용량이 많아지고 더 많은 더 많은 동적 요소들을 담게된다면 코드의양도, 수행해야될 작업도 많을 것이다.
이점을 보완하기 위해 많은 프레임워크들과, 라이브러리들이 생겨났지만, 리액트는 완전히 다른 발상으로 만들어 졌다고 한다!
virtual Dom
이제 여기서 나오는 개념이 virtualDom (가상돔) 되시겠다!
가상돔에 대해 이어가기 전! 먼저 DOM이 뭘까!?
DOM(문서객체모델)
문서 객체 란 Web Browser 안에서 HTML 문서에 JavaScript 가 접근할 수 있도록 <html 태그> 들을 객체 (object) 로 만든 것이다.
프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는 역할을 한다.
→ 한마디로 웹브라우저 안에서 javaScript 는 개발자들이 HTML 태그들 속에 열심히 심은 기능들에 접근하여 기능을 실행해야 한다. 하지만 HTML 문서 안에 프로그래밍 언어인 자바스크립트는 어떻게 접근할 수 있을까? (종족 자체가 다른데?) 그건 DOM 이라는 객체를 통해 인식 가능하다고 본다.
(이 객체모델은 내부 API 로 연결되어 여러 언어에서 사용될 수 있다. 그래서 MDN 에서는 api 로 정의하기도 한다.)
virtualDom은 뭐가 다른가?
- DOM의 구조를 흉내낸 JavaScript 객체이다. (트리구조)
- in-memory에 존재해서 실제 렌더 되지 않는다.
react는 다른 프레임워크 혹은 라이브러리 등들과 다르게 상태에 변화가 일어나면 아예 새로 그리는 방식으로 상태변화 , 업데이트를 시킨다.
react는 변화가 일어나면 변화가 일어난 ui전체를 가상돔에 리렌더링한다, 그후 이전의 가상돔과 비교해 변화가 일어난 부분만 적용한다.
이러한 방식으로 리엑트는 빠른 성능도 지켜내며 DOM의 업데이트도 가능하게 해주었다!
