SOAPLE 처음 만난 리액트 - Rendering Elements

리액트의 Elements

리액트를 구성하는 가장 작은 블록들을 의미

DOM 요소의 가상 표현이 리액트 요소라는 것을 알 수 있다. 실제 DOM 요소는 리액트 요소보다 더 많은 정보를 가지고 있으므로 크다.

상대적으로 리액트 요소는 화면에서 보이는 것들을 기술하는 것이므로 작다.

 

 

React의 요소는 자바스크립트 객체 형태로 존재(불변성)한다.

한번 생성된 요소는 children이나 속성을 변경할 수 없다.

 

ReactDOM.render(리액트Element, HTMLElement)

즉 위 함수는 리액트 요소를 HTML 요소(DOM 요소)로 렌더링하는 것임

 

 

 

import React from 'react';

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

export default Clock;

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import Clock from './chapter04/Clock';

setInterval(() => {
  ReactDOM.render(
    <React.StrictMode>
      <Clock />
    </React.StrictMode>,
    document.getElementById('root')
  );
}, 1000);

reportWebVitals();

 

뭔가 조금씩 쓰는 방식을 이해할 것 같기도 ... 하다?