시계만들기

OwlSuri·2022년 7월 13일
0

React

목록 보기
7/20

React로 간단한 시계를 만들기 위해
아래와 같이 작성하고

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/client";
import "./index.css";
import reportWebVitals from "./reportWebVitals";

import Clock from "./chapter_04/clock";

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

reportWebVitals();

indes.js를 이렇게 바꿔주니
화면에 아무 것도 나타나지 않았다...??

콘솔을 열어보니

Uncaught TypeError: react_dom_clientWEBPACK_IMPORTED_MODULE_1.render is not a function

이런 오류가 떠 있었다.

그래서??
에러일지를 썼다....

같은 에러가 생겼다면, 아래 링크를 참고해주세요😀
https://velog.io/@owlsuri/Uncaught-TypeError-reactdomclientWEBPACKIMPORTEDMODULE1.render-is-not-a-function

에러를 해결하고 나니, 1초단위로 시간이 바뀌면서 잘 뜬다.

개발자 도구의 Element탭 root에서

변경된 부분만 깜빡이면서 바뀌는 것을 볼 수 있다.

profile
기억이 안되면, 기록을 -

0개의 댓글