게시글은 리액트 공부용이며 출처를 제시합니다.
출처: 소플의 처음 만난 React, 리액드를 다루는 기술, 모던 자바스크립트 deep dive
Elements
Elements are the smallest building blocks of React apps.
엘리먼트는 리액트 앱의 가장 작은 빌딩 블록
HTML 요소인 element가 아닌 화면에 나타나는 내용을 기술한 자바스크립트 객체
Virtual DOM에 존재하는 엘리먼트 즉, 리액트 엘리먼트는 DOM 엘리먼트의 가상 표현
리액트의 엘리먼트는 화면에서 보이는 것을 기술한다.
엘리먼트가 기술한 내용을 토대로 실제 화면에서 보게 되는 DOM 엘리먼트가 만들어 진다.
엘리먼트의 생김새
리액트 엘리먼트는 자바스크립트 객체 형태로 존재한다.
이 객체는 마음대로 변경할 수 없는 불변성을 가지고 있다.
{
type: 'button',
props: {
className: 'bg-green',
children: {
type: 'b',
props: {
children: 'Hello, element!'
}
}
}
}엘리먼트는 위의 코드처럼 단순한 자바스크립트 객체이다.
type에 HTML 태그 이름이 문자열로 들어가는 경우, 엘리먼트는 해당 태그 이름을 가진 DOM Node를 나타내고 props는 속성을 나타낸다.
위의 엘리먼트가 실제로 레더링 된다면 다음과 같은 DOM 엘리먼트가 된다.
<button class='bg-green'>
<b>
Hello, element!
</b>
</button>엘리먼트의 type에 HTML 태그 이름이 문자열로 들어가는 것이 아닌 경우?
리액트 컴포넌트 엘리먼트 역시 자바스크립트 객체이며 다른 점은 type에 HTML 태그가 아닌 리액트 컴포넌트의 이름이 들어갔다는 점
{
type: Button,
props: {
color: 'green',
children: 'Hello, element!'
}
}-
type에 Button 컴포넌트를 작성한다.
-
위의 코드가 바로
createElement()가 될 수 있다.
React.createElement(
type,
[props],
[...children]
)이처럼 컴포넌트 렌더링을 위해서 모든 컴포넌트가 createElement() 함수를 통해 엘리먼트로 변환된다는 것을 반드시 알아두자
컴포넌트를 렌더링 하고 싶어!
createElement(): 오케! 엘리먼트로 변환해줄게!
엘리먼트의 특징
불변성
변하지 않는 성질. 한 번 생성된 엘리먼트는 변하지 않는다.
엘리먼트 생성 후에는 children이나 attributes를 바꿀 수 없다.
엘리먼트 생성 후
엘리먼트는 다양한 모습으로 존재할 수 있지만 한 번 생성도니 다음에는 변경이 불가능하다.
붕어빵 -> 틀에 넣었다 -> 구워져 나왔다 -> 안에 있는 팥을 슈크림으로 바꿀 수 없다.
질문
엘리먼트가 변할 수 없다면 화면 갱신이 안 되는 것 아닌가?
화면에 새로운 내용을 보여주기 위해서 Virtual DOM은 변경된 부분을 계산(compute Diff)하고 해당 부분만 다시 렌더링 한다.
여기서 동그란 각 원들이 엘리먼트이다.
빨간색으로 표시된 원들은 변경된 엘리먼트들이 되는 것
엘리먼트는 불변성을 갖고 있기 때문에 화면에 새로운 내용을 보여주기 위해 새로운 엘리먼트를 만들어서 기존 엘리먼트가 연결되어 있는 부분에 바꿔 달면 된다.
여기까지 정리
컴포넌트들이 화면에 구현되기 전에 React DOM을 통해서 JS 객체로 구성된 엘리먼트로 변환된다. 어차피 브라우저는 JS를 이해할 수 있기 때문이다.
엘리먼트는 불변성을 가지고 있어서 생성된 후에는 속성 및 자식을 바꿀 수 없다. 따라서 UI가 변경되기 위해서는 Virtual DOM이 수정 이전의 버전과의 연결고리를 끊어버리고 새로운 엘리먼트를 연결시키는 방법으로 진행된다.
엘리먼트 렌더링
Root DOM node
<div id="root"></div>이 div 태그 안에 있는 모든 것이 리액트 DOM에 의해 관리된다.
오직 리액트만으로 만들어진 모든 웹사이트는 단 하나의 Root DOM node를 가지게 된다.
렌더링을 하기 위해서는 아래와 같은 코드가 필요하다
const element = <h1>안녕, 리액트!</h1>
ReactDOM.render(element, document.getElementById('root'))- ReactDOM의
render()함수의 파라미터는- 리액트 엘리먼트
- HTML 엘리먼트
리액트의 엘리먼트는 리액트의 Virtual DOM에 존재
HTML 엘리먼트는 실제 브라우저의 DOM에 존재
⛳ 결국, 리액트의 엘리먼트가 렌더링되는 과정은 Virtual DOM에서 실제 DOM으로 이동하는 과정이다.
렌더링된 엘리먼트 업데이트 하기
function tick(){
const element = (
<div>
<h1>안녕, 리액트!</h1>
<h2>현재 시간 : {new.Data().toLocaleTimeString()}</h2>
</div>
);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000)-
위의 함수는
setInterval을 통해서 1초마다tick함수를 호출한다. -
매초 화면에 새로운 시간이 나오게 된다.
.📢 내부적으로는 tick() 함수가 호출될 때마다 기존 엘리먼트를 변경하는 것이 아니라 새로운 엘리먼트를 생성해서 바꿔치기 하는 것
실제 개발자 도구로 엘리먼트를 클릭하고 갱신되는 부분만 반짝거린다.
매초 새로운 엘리먼트가 생성되어 기존 엘리먼트와 교체되면서 내용이 변경되고 변경된 부분에 반짝이는 효과가 나타난다.
리액트 엘리먼트의 불변성 때문이에 엘리먼트를 업데이트 하기 위해서는 새로 만들어야 한다!!!
