React 공부 (5) 엘리먼트 렌더링

seon·2024년 1월 23일

웹

Web

목록 보기

10/33

출처: 소플의 처음 만난 리액트

# Elements의 특징

=> element = react element

React elements are immutable
리액트 엘리먼트는 불변성을 띈다

=> im 부정 + mutable 변할 수 있는
=> immutable 변할 수 없는
=> 한 번 생성된 엘리먼트는 변하지 않습니다
=> 엘리먼트 생성 후에는 children이나 attribute를 바꿀 수 없습니다

붕어빵을 구웠을 때 붕어빵의 속을 바꿀 수 없는 것과 같은 경우입니다.

컴포넌트는 일종의 붕어빵 틀입니다.
붕어빵이 새로 구워져 나오는 과정은 엘리먼트가 새로 생성되는 것과 같습니다.
변경된 엘리먼트를 보여주는 과정은 새로 엘리먼트를 만들어 기존 엘리먼트를 바꾸는 것과 같습니다.

리액트는 상태관리, 화면바뀜에 의해 성능이 결정됩니다.

엘리먼트는 새로 생성됩니다. (빨간색)

# Elements 렌더링하기

<div id="root"></div>

React 앱에 들어가는 필수적인 코드
Root DOM Node 입니다.

const element = <h1>안녕, 리액트!</h1>
ReactDOM.render(element, document.getElementById('root'));

React DOM의 실제 엘리먼트를 렌더링하기 위해서는 다음과 같은 코드를 사용합니다.
이 코드는 먼저 엘리먼트를 하나 생성하고,
생성된 엘리먼트를 root div에 렌더링하는 코드입니다.
render함수를 사용합니다.
- React 엘리먼트 : 첫번째 파라미터
- html 엘리먼트/DOM 엘리먼트 : 두번째 파라미터
- 첫번째 파라미터를 두번째 파라미터에 렌더링합니다.
- 유의사항: React 엘리먼트와 DOM 엘리먼트는 다른 개념입니다.
  리액트 엘리먼트 - React Virtual DOM에 존재
  DOM 엘리먼트 - 실제 Browser DOM에 존재

엘리먼트 렌더링이란?

Virtual DOM에서 실제 DOM으로 이동하는 과정입니다.

# 렌더링된 Elements를 업데이트 하기

불변성 : 엘리먼트는 한번 생성되면 바꿀 수 없습니다.
=> 엘리먼트를 업데이트하기 위해서는 다시 생성해야 합니다.

function tick() {
  const element = (
    <div>
    	<h1>안녕, 리액트!</h1>
    	<h2>현재 시간: {new Date().toLocaleTimeString()}</h2>
	</div>
  );
 
 ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);