4. rendering elements

-elements?

리액트 앱을 구성하는 요소. 가장 작은 블록들.

 

-리액트 엘리먼트와 DOM 엘리먼트의 차이점

DOM 엘리먼트: 실제 화면에 나타나는 내용을 기술하는 자바스크립트 객체. 상대적으로 크고 무거움

리액트 엘리먼트: DOM 엘리먼트의 가상표현.상대적으로 작고 가벼움.

 

-리액트 엘리먼트 특징

불변성 : 한번 생성된 엘리먼트는 변하지 않는다. = 생성 후에는 children이나 arttributes를 바꿀 수 없다.

              = 컴포넌트라는 틀에 따라 엘리먼트들이 생성된다.

              = 렌더링을 해서 새로운 엘리먼트를 생성 교체하는게 수정하는 것이다.

 

 

-실습

Clock.jsx

import React from "react";

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

export default Clock;

 

index.js

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

import Clock from './chapter04_elements/Clock';

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

**주의 

처음 index.js 를 열었을때 2번째 줄은

import ReactDOM from 'react-dom/client';

 

로 되어 있다.

이 상태로 페이지를 열면 오류가 뜨면서 제대로 실행이 안된다.

 

그러니 2번째 줄에서 /client 부분을 지우고 실행해야지 제대로 페이지가 뜬다.

 

 

 

이전 수업에서의 차이점이라면 .render앞에 붙어 있는게 root냐 ReactDOM이냐다.

 

const root = ReactDOM.createRoot(document.getElementById('root'));

 

이러한 선언으로 따로 root 처리가 되어 있다면 root.render를 이용해 렌더링을 해야한다.(import의 ReactDOM에서 from  부분도 /client가 있는지 확인해야한다.)

 

만약 선언된 root를 그대로 이용해서 렌더링을 하려고 한다면 index.js는 다음처럼 수정한다.

 

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

import Clock from './chapter04_elements/Clock';

const root = ReactDOM.createRoot(document.getElementById('root'));
/* 기존
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
*/
setInterval(() => {
  root.render(
    <React.StrictMode>
      <Clock />
    </React.StrictMode>
  );
}, 1000);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();