2개 이상의 기록 보여주기

위 그림과 같이 2개 이상의 기록을 보여주려면 배열로 전환해야 한다.

DidTime.jsx 파일을 고쳐 DidTime 컴퍼넌트를 수정한다.

// src\DidTime.jsx

import {useState} from 'react';

function DidTime( {title }) {
  const [did_times, set_did_times] = useState([]);

  function getdate()
  {
    const date = new Date();    
    return date.toLocaleDateString('ko-KR') + ' ' +  date.toLocaleTimeString('ko-KR');
  }

  function checkTime()
  {
    const current_time = getdate();
    // 전체 개수가 1개 이하면 배열에 현재 시간을 추가한다.
    if (did_times.length <= 1)
    {
      const new_did_times = [...did_times, current_time];
      console.log("did_times :", new_did_times);
      set_did_times(new_did_times);
    }
    else // 전체 개수가 2개면 2번째 배열의 값은 지금 시간으로 변경한다.
    {
      const new_did_times = [...did_times];
      new_did_times[1] = current_time;      
      set_did_times(new_did_times);
    }
  }

  return (
    <>
      <div className="center_div">
        <div>
          <button onClick={checkTime}>{title}</button>
        </div>
        <div>
          {
            did_times.map( (item) => (
                <div>{item}</div>
              )
            )
          }
        </div>
      </div>
    </>
  )
}

export default DidTime

여기가지 하면 문제가 있다. 맨 아래 한줄만 값이 바뀐다. 가장 옛날 건 지워지고 가장 최신 것 2개가 남아야 하는데 맨 아래 한 줄만 값이 바뀌니 가장 옛날 거 하나와 가장 최신 것 하나가 보여지는 셈.

이 문제는 배열을 역순으로 정렬하면 된다.

그럼 맨 아래에는 가장 오래된 자료가 보일 거고, 가장 밑에 있는 그 가장 오래된 자료를 수정하고 현재 시각으로 바꾸고 다시 역순으로 정렬하면 된다.

배열을 정렬하는 함수는 sort() 함수이고 역순으로 뒤집는 함수는 reverse()이다. 그러니까 sort()로 배열을 정렬하고, reverse() 함수로 역순으로 만들어주면 결국 역순 정렬이 된다.

// src\DidTime.jsx

import {useState} from 'react';

function DidTime( {title }) {
  const [did_times, set_did_times] = useState([]);

  function getdate()
  {
    const date = new Date();    
    return date.toLocaleDateString('ko-KR') + ' ' +  date.toLocaleTimeString('ko-KR');
  }

  function checkTime()
  {
    const current_time = getdate();
    // 전체 개수가 1개 이하면 배열에 현재 시간을 추가한다.
    if (did_times.length <= 1)
    {
      const new_did_times = [...did_times, current_time];
      console.log("did_times :", new_did_times);
      set_did_times(new_did_times.sort().reverse());
    }
    else // 전체 개수가 2개면 2번째 배열의 값은 지금 시간으로 변경한다.
    {
      const new_did_times = [...did_times];
      new_did_times[1] = current_time;      
      set_did_times(new_did_times.sort().reverse());
    }
  }  

  return (
    <>
      <div className="center_div">
        <div>
          <button onClick={checkTime}>{title}</button>
        </div>
        <div>
          {
            did_times.map( (item) => (
                <div>{item}</div>
              )
            )
          }
        </div>
      </div>
    </>
  )
}

export default DidTime