React.createElement 와 ReactDOM.render

Example code

예시 코드를 보며 React.createElement() 와 ReactDOM.render() 에 대해 알아보려 한다.

function FollowButton() {
	const [following, setFollowing] = React.useState(false);
	return React.createElement(
		'div',
		{
			onClick: () => setFollowing(!following)
		},
		following ? 'following' : 'Follow'
	);
}

const domContainer = document.querySelector('#follow_button_container');
ReactDOM.render(React.createElement(FollowButton), domContainer);

React.createElement() 함수

• Javascript
  document.createElement(tagName[, options])
  => 지정한 tagName의 HTML 요소를 만들어서 반환

• React
  React.createElement(component, props, ...children)
  => ReactElement를 반환

React.createElement(component, props, ...children)

• component : 문자열 or 리액트 컴포넌트가 들어감
  • 문자열은 HTML 태그를 의미 ex. 'div'
  • 리액트 컴포넌트 ex. FollowButton
• props : component가 가질 수 있는 옵션들을 객체의 형태로 넣어줌
  • ex. style, className
• ...children : component가 감싸고 있는 텍스트 or 내부 컴포넌트가 들어감
  • 텍스트 ex. 'following'
  • 리액트 컴포넌트 ex. FollowButton
  • ex. React.createElement('p', null, 'hello')
    
    

ReactDOM.render() 함수

• ReactDOM.render(element, container[, callback])
• ReactElement를 루트의 DOM 노드에 렌더링 하기 위해 사용
• ReactDOM은 DOM이 ReactElement와 일치하도록 업데이트 해줌