3. 엘리먼트란

Element 란 요소,성분 이라는 뜻을 가지고 있다.

여기서 react 의 엘리먼트는 리액트 앱을 구성하는 요소를 의미한다.

리액트 앱은 Virtual DOM을 사용한다고 했다.

따라서 react의 엘리먼트는 DOM 엘리먼트의 가상표현이라고 이해하면 된다.

 

엘리먼트의 생김새

리액트엘리먼트는 자바스크립트 객체 형태로 존재한다.

예를 들면 컴포넌트유형(버튼등)과 속성(color 등) 및 자식의 정보를 포함하는 일반적인 자바스크립트 객체이다.

{
	type:'button',
    props:{
    	className:'bg-green',
        children:{
        	type:'b',
            props:{
            	children:'Hello!!'
            }
        }
    }
}

위의 코드는 버튼을 나타내기 위한 리액트 엘리먼트이다.

위의 엘리먼트가 렌더링 된다면 다음과 같은 DOM 엘리먼트가 된다.

<button class='bg-green'>
	<b>
    	Hello!!
    </b>
</button>

 

엘리먼트의 특징

엘리먼트는 불변성이라는 특징을 가지고 있다. 즉, 엘리먼트 생성 후에는 children 이나 attibutes를 바꿀 수 없다.

여기서 의문점이 생기는데 그러면 생성된 화면을 바꿀 수 없을까? 라는 것이다.

이 부분은 엘리먼트를 생성 후 다시 새로운 엘리먼트를 생성해서 바꿔치기 하는 방법으로 화면을 갱신하게 된다.

즉 새로운 내용을 보여주기 위해서는 Virtual DOM 에서는 변경된 부분만 계한하여 해당 부분만을 다시 렌더링 하게 된다.

 

 

엘리먼트 렌더링

엘리먼트를 생성 한 이후 실제로 화면에 보여 주기 위해서는 렌더링 하는 과정을 거쳐야 한다.

엘리먼트 렌더링 하는 과정은 다음과 같다.

ReactDOM.render(
	element,
    document.getElementById('root')
);

이 코드는 root div 에 렌더링 하는 코드이다.

 

렌더링된 엘리먼트 업데이트

이미 렌더링된 엘리먼트 업데이트 하는 과정을 살펴 보자.

function tick(){
	const element=(
		<div>
			<h1>하이!!</h1>
			<h3>현재시간은 {new Date().toLocaleTimeString()} 이야!</h3>
		</div>
	);
	ReactDOM.render(
		element,
		document.getElementById('root')
	)
}

setInterval(tick,1000)

setInterval 을 이용해서tick() 함수를 실행하게 되면 다음과 같이 시간 부분만 갱신이 되는 것을 확인 할 수 있다.

 

 

참고

소플의 처음 만난 리액트