React - 기본예제) 시계 만들기

프로젝트 구조

 

1. Clock.jsx

import React from "react";

function Clock(props){
    return(

            <div id="clock-header">
                <h1 className="neonText">안녕, 리액트!</h1>
                <h2 className="neonText">현재 시간 : {new Date().toLocaleTimeString()} </h2>
            </div>
    );
}

export default Clock;

2. neonStyle.css

.neonText{
    color: #fff;
    text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa,
      0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa;
      text-align: center;
}
#clock-header{
  margin-top: 10%;
}

 

3. index.css

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: black;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

 

4. index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import Clock from './Test01/Clock';
import './Test01/neonStyle.css';

// 기본으로 작성되는 부분 주석처리
// const root = ReactDOM.createRoot(document.getElementById('root'));
// root.render(
//   <React.StrictMode>
//     <Clock />
//   </React.StrictMode>
// );

setInterval( () => {
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.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();

 

결과