[240528] 특정 시간이 지나면 화면 출력

Next.js에서 특정 시간이 지나면 원하는 화면을 출력하는 기능을 구현하려면, 서버 측에서 시간을 체크하거나 클라이언트 측에서 타이머를 설정할 수 있습니다. 이 예제에서는 클라이언트 측에서 타이머를 설정하여 특정 시간이 지나면 화면을 업데이트하는 방법을 설명하겠습니다.

 

 

1. 기본 설정

Next.js 프로젝트를 설정하고 필요한 페이지를 만듭니다.

 

 

2. 클라이언트 측에서 특정 시간을 기다렸다가 화면 업데이트

React의 useEffect와 useState 훅을 사용하여 클라이언트 측에서 시간을 체크하고, 특정 시간이 지나면 상태를 업데이트하여 화면을 변경할 수 있습니다.

 

 

2.1. pages/index.js 파일 생성 및 수정

다음은 클라이언트 측에서 특정 시간이 지나면 화면을 업데이트하는 예제입니다:

// pages/index.js
import { useEffect, useState } from 'react';

const Home = () => {
  const [showContent, setShowContent] = useState(false);

  useEffect(() => {
    // 목표 시간 설정 (예: 5초)
    const targetTime = 5000;

    // 타이머 설정
    const timer = setTimeout(() => {
      setShowContent(true);
    }, targetTime);

    // 컴포넌트 언마운트 시 타이머 클리어
    return () => clearTimeout(timer);
  }, []);

  return (
    <div>
      {showContent ? (
        <h1>특정 시간이 지나면 출력되는 화면</h1>
      ) : (
        <h1>기다리는 중...</h1>
      )}
    </div>
  );
};

export default Home;

이 코드는 다음과 같이 작동합니다:

1. useEffect 훅에서 컴포넌트가 마운트될 때 타이머를 설정합니다.
2. 타이머가 목표 시간(예: 5000ms = 5초) 후에 실행되면 setShowContent(true)를 호출하여 상태를 업데이트합니다.
3. 상태가 업데이트되면 조건부 렌더링을 통해 화면의 내용이 변경됩니다.
4. 컴포넌트가 언마운트될 때 타이머를 클리어하여 메모리 누수를 방지합니다.

 

2.2. 특정 시간 계산

만약 특정 시간을 설정하고 그 시간이 지나면 화면을 업데이트하고 싶다면, 현재 시간과 목표 시간의 차이를 계산하여 타이머를 설정할 수 있습니다.

예를 들어, 오늘의 특정 시간(예: 오늘 오후 3시)을 기다리도록 설정하려면 다음과 같이 할 수 있습니다:

 

// pages/index.js
import { useEffect, useState } from 'react';

const Home = () => {
  const [showContent, setShowContent] = useState(false);

  useEffect(() => {
    // 현재 시간
    const now = new Date();
    // 목표 시간 설정 (오늘 오후 3시)
    const targetTime = new Date();
    targetTime.setHours(15, 0, 0, 0); // 15:00:00

    // 목표 시간이 이미 지난 경우, 다음 날 같은 시간으로 설정
    if (now > targetTime) {
      targetTime.setDate(targetTime.getDate() + 1);
    }

    // 남은 시간 계산
    const timeUntilTarget = targetTime - now;

    // 타이머 설정
    const timer = setTimeout(() => {
      setShowContent(true);
    }, timeUntilTarget);

    // 컴포넌트 언마운트 시 타이머 클리어
    return () => clearTimeout(timer);
  }, []);

  return (
    <div>
      {showContent ? (
        <h1>특정 시간이 지나면 출력되는 화면</h1>
      ) : (
        <h1>기다리는 중...</h1>
      )}
    </div>
  );
};

export default Home;

 

이 코드에서는 오늘 오후 3시를 목표 시간으로 설정하고, 현재 시간과의 차이를 계산하여 타이머를 설정합니다. 만약 현재 시간이 이미 오후 3시를 지난 경우, 다음 날 오후 3시로 설정합니다.

 

 

 

3. 서버 측에서 시간을 체크 (옵션)

서버 측에서 시간을 체크하려면 Next.js API 라우트를 사용하거나 getServerSideProps를 사용하여 서버에서 렌더링 시 시간을 체크할 수 있습니다. 그러나 일반적으로 이러한 시간 기반 조건은 클라이언트 측에서 처리하는 것이 더 효율적입니다.