-
[React] 시계 만들기Front-end/react 2022. 8. 8. 13:09
현재 시간을 표시해주는 element를 만들어보자!
import React from "react"; function Clock(props) { return ( <div> <h1>Hi, React!</h1> <h2>현재 시간: {new Date().toLocaleTimeString()}</h2> </div> ); } export default Clock;
1. Clock.jsx 파일을 만들고, 현재 시간을 알려주는 컴포넌트를 만든다
import Clock from './chap_04/Clock'; setInterval(() => { const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Clock />); }, 1000);
2. index.js 파일에
1000ms마다 새롭게 Clock 컴포넌트를 root에 랜더링하도록 하는 코드를 추가한다
npm start를 하다가 만난 첫 번째 에러
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path /Users/yeonsu/Desktop/React-Study-main/practice-jsx/package.json
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, open '/Users/yeonsu/Desktop/React-Study-main/practice-jsx/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/yeonsu/.npm/_logs/2022-08-08T03_55_52_395Z-debug-0.log💡 해결방법: package.json이 있는 폴더로 경로를 이동한다
cd "경로"나같은 경우는 똑같은 이름의 폴더가 2개나 있어서 첫 번째 폴더의 경로에서 npm start를 하려고 하니까 나타났던 에러였다.
npm start를 하다가 만난 두 번째 에러
Uncaught TypeError: react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function
at index.js:11:1강의가 예전꺼다 보니까 React version이 18로 업데이트 되면서 더이상 ReactDOM.render을 지원하지 않아 생기는 문제였다.
setInterval(() => { ReactDOM.render( <React.StricMode> <Clock /> </React.StricMode>, document.getElementById('root') ); }, 1000);
👆예전 방식 코드를
setInterval(() => { const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Clock />); }, 1000);
👆이런 식으로 수정해주면 된다
'Front-end > react' 카테고리의 다른 글
[React] State (0) 2022.08.10 [React] 댓글 컴포넌트 만들기 (0) 2022.08.08 [React] React Element, Component (0) 2022.08.07 [React] JSX에 대해 알아보기 (0) 2022.08.05 [React] 개요 (0) 2022.08.05