Jay's Coding Log

Next.js의 Hook을 이용해 시계를 만들어 보자.

### useState

### useEffect

### new Date()

1. 전체 코드

오늘 사용한 전체 코드는 다음과 같다.

'use client';
import { useState, useEffect } from 'react';

export default function Home() {
  const [currentTime, setCurrentTime] = useState(
    new Date().toLocaleTimeString()
  );

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentTime(new Date().toLocaleTimeString());
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      <h1>현재 시간</h1>
      <p>{currentTime}</p>
    </div>
  );
}

2. 코드 설명

const [currentTime, setCurrentTime] = useState(
    new Date().toLocaleTimeString()
  );

- useState를 사용하여 현재시간을 관리하는 상태 변수를 생성함.

- 초기값은 "new Date().toLocaleTimeString()"으로 현재 시간으로 설정함.

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentTime(new Date().toLocaleTimeString());
    }, 1000);

    return () => clearInterval(interval);
  }, []);

- useEffect 훅을 사용하여 마운트 될 때 동작 수행을 지정

- setInterval을 사용하여 1초(1000)마다 현재 시간 업데이트

- setCurrentTime()을 통해 갱신된 시간 저장

- return () => clearInterval(interval): 메모리 누수를 방지하기 위해, setInterval을 정리

return (
    <div>
      <h1>현재 시간</h1>
      <p>{currentTime}</p>
    </div>
  );
}

- JSX문법을 통해 실제 화면 렌더링

- {currentTime}에서 1초마다 새로운 시간 갱신