[ React ] Element Rendering

Element

React app의 가장 작은 단위로, screen에 표시할 content를 표현.

ex)

const element = <h1>Hello, world</h1>;

Browser DOM Element와 달리 React Element 는 일반 객체이며, 쉽게 생성이 가능하다. ReactDOM은 React element와 일치하도록 DOM을 Update해준다. 

 

※ Element는 Component의 구성요소.

※ React Element는 불변객체로서, Element를 생성한 이후에는 해당 element의 자식이나 속성을 변경할 수 없기 때문에 UI를 새로 Update하기 위해서는 새로운 Element를 생성하여 ReactDOM.render() 로 전달하여 redering해줘야 한다. 

 

[ + ] React Element는 사용자 정의 Component로도 나타낼 수 있다.

ex) 

function Welcome(props){
	return <h1>Hello, {props.name}</h1>;
}


const element = <Welcome name ="Sara"/>;
ReactDOM.render(
	element, 
    document.getElementById('root')
);

과정 : 

1) <Welcome name = "Sara"/> element로 ReactDOM.render() 호출

2) props 값 : { name : 'Sara' } 를 Welcome component로

3) Welcome Component의 결과로 <h1>Hello, Sara</h1> element 반환

4) ReactDOM은 반환된 해당 element( <h1>Hello, Sara</h1> ) 와 DOM이 일치하도록 UPDATE

 

결과 값 => Hello, Sara