2-1 렌더링 element

react에서 element란 리액트 앱을 구성하는 가장 작은 블록들이다.

기존에 우리가 자주사용하던 element는 react의 element가 아닌 DOM Element 이다.

React Element와 DOM element의 차이

• Virtual DOM에 존재하는 element가 react Element
• Browser DOM에 존재하는 element가 Dom Element

따라서 react element는 dom element의 가상 표현이라고 볼 수 있다.

 

Elements의 생김새

React Elements는 자바스크립트 객체 형태로 존재한다.

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>
    }
}