JS

const div = document.createElement('div');
document.body.appenChild(div);
div.innerText = 'Hello World!';

JS에서의 Hello World 출력

JS에서의 'Hello World' 출력은 세 단계로 구분할 수 있겠다.

1️⃣ 'Hello Wolrd' 문자열을 담을 HTML 태그를 생성
2️⃣ 생성된 <div> 태그를 document body의 하위 태그로 세팅
3️⃣ <div> 태그에 'Hello World'를 박제

React

function Hello () {
  return(
  	<div>Hello World!</div>
  );
}

ReactDom.render(<Hello />, document.getElementById('root'));

React에서의 Hello World 출력

반면, React에서는 두가지 단계로 구분할 수 있다.

1️⃣ 웹페이지에 렌더링할 Hello 컴포넌트를 생성
2️⃣ Hello 컴포넌트를 React Virtual Dom에 렌더

Power

간단한 예시이기에 JS 코드가 간결해보이는건 사실이다. 하지만 React의 강력함은 JS에서 DOM에 접근하고 생성해야 하는 처리가 많아질수록 독보적이게 된다. JS에서의 DOM 트리와 마찬가지로 React에서는 하나의 상위 컴포넌트가 하위 컴포넌트들과 구성하면서 동적인 웹 생태계를 만들어간다.