[질문 목록] 질문 목록에서 현재 시각 계속 업데이트하느라 전체 리스트가 다시 렌더링됨

[leegwae]

현재 상황

• 질문 목록 컴포넌트에서 useCurrentDate로 1초마다 업데이트되는 상태 사용하고 있음 => 1초마다 질문 목록 전체 렌더링
• 따로 TimeDiff라는 컴포넌트를 만들어서 해당 컴포넌트만 렌더링되게 바꿀 수 있음.

export function TimeDiff({ target }: Props): JSX.Element {
  const now = useCurrentDate();
  return <div>{formatTimeDifference(now, target)}</div>;
}

<ul>
{questionList.map(question => <li><TimeDiff target={questioin.createdAt}></li>)}
<ul>

문제

• 그런데 이렇게 하면 질문 아이템이 서로 다른 now를 가지게 될 수도 있음(map으로 돌리는 동안 시간이 지나기 때문임)

해결

• 그렇다면 useCurrentDate가 초기값을 받게 해서 일종의 타이머처럼 만들면 됨. delay마다 초기값+delay해주는 훅으로 만들면 됨

import React from 'react';

import { useCurrentDate } from '@/hooks/useCurrentDate';

import { formatTimeDifference } from './InfiniteQuestionList';

interface Props {
  start: Date;
  target: Date;
}
export function TimeDiff({ start, target }: Props): JSX.Element {
  const now = useCurrentDate({ start });
  return <div>{formatTimeDifference(now, target)}</div>;
}