[React] Element

Element

• 정의 : 영단어의 뜻은 요소, 성분이라는 뜻을 가지고 있고
  리액트의 element는 리액트 앱을 구성하는 요소를 의미한다.

 

Element의 생김새

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

※ 엘리먼트는 컴포넌트 유형(ex. Button)과 속성(ex. Color) 및 내부의 모든 지식에

대한 정보를 포함하고 있는 일반적인 자바스크립트 객체이다.

function Button(props) {
	return (
    <button className={`bg-${props.color}`}>
    	<b>
        	{props.children}
        </b>
    </button>
 	)
}

function ConfirmDialog(props) {
	return (
    	<div>
        	<p>내용을 확인하셨으면 확인 버튼을 눌러주세요.</p>
            <Button color='green'>확인</Button>
        </div>
    )
}

Button 컴포넌트와 COnfirmDialog 컴포넌트가 있으며, ConfirmDialog 컴포넌트가
Button 컴포넌트를 포함하고 있다.

{
	type : 'div',
    props : {
    	children : [
        	{
            	type : 'p',
                props : {
                	children : '내용을 확인하셨으면 확인 버튼을 눌러주세요.
                    }
            },
            {
            	type : 'button',
                props: {
                		className: 'bg-green',
                        children: {
                        	type: 'b',
                            props: {
                            	children:'확인'
                          }
                	}
            	}
         	}
     	]
  	}
}

최종적인 엘리먼트의 모습이며, 이처럼 컴포넌트 렌더링을 위해서 모든 컴포넌트가
createElement() 함수를 통해 엘리먼트로 변환된다.

 

Element의 특징

• 불변성  : 변하지 않는 성질 (한번 생성된 엘리먼트는 변하지 않는다)
  엘리먼트 생성 후에는 children이나 attributes를 바꿀 수 없다.
  → 상태 관리와 더불어 화면이 갱신되는 횟수는 실제 리액트를 이용한 개발 과정에서
  성능에 큰 영향을 미치는 요소이다.

실습 (시계 만들기)

1. chapter_04 디렉토리 생성

chapter_04 생성

2. Clock.jsx 파일 생성 후, Clock 리액트 함수 컴포넌트 생성

import React from 'react';

function Clock(props) {
    return (
        <div>
            <h1>안녕, 리액트!</h1>
            <h2>현재 시간 : {new Date().toLocaleTimeString()}</h2>
        </div>
    );
}

export default Clock;

Clock 컴포넌트는 현재 시간을 출력하는 아주 간단한 컴포넌트이다.

 

3. index.js 파일을 열어 setInterval() 함수를 사용해 Clock 컴포넌트를 root div에 렌더링

setInterval() 함수

4. 코드 실행

코드 실행

root idv를 쭉 펼쳐보면 매초 시간이 바뀌면서 변경된 부분이 깜빡거리는 것을 확인 할 수 있다.

 

<출처> 소플의 처음 만난 리액트 (저) 이인제 한빛미디어