버튼 누르면 시간 기록

이 앱은 버튼을 누를 때마다 현재 시각을 기록하는 앱이다. 그래서 가장 중요한 기능인 현재 시각을 가져오는 함수부터 만들어 본다.

현재 시각 얻는 함수

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

이 함수를 이용하면 현재 시각을 쉽게 얻을 수 있다 .

이 함수를 App.jsx에 추가해서 현재 시각이 잘 나오는지 확인해 보자.

// App.jsx

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

  return (
    <>
      {getdate()}
    </>
  )
}

export default App

이렇게 날짜와 시간이 한국식으로 잘 표현되어 나오는 걸 확인할 수 있다.

버튼 추가

버튼을 추가해 보자.

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

  return (
    <>
      <button>출/퇴근</button>
      {getdate()}
    </>
  )
}

export default App

버튼 아래에 날짜가 찍히도록 하기 위해 div 태그로 구역을 나눠준다.

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

  return (
    <>
      <div>
        <button>출/퇴근</button>
      </div>
      <div>
        {getdate()}
      </div>
    </>
  )
}

export default App

css: 전체적으로 가운데로 옮기기

index.css 파일을 수정해 버튼과 시간이 가운데로 옮겨주려 한다.

그 전에 먼저 테두리를 그려서 영역을 확인해야 한다 .

index.css 파일의 맨 끝에 다음을 추가한다.

.center_div
{
  border: 1px solid;
}

css 클래스의 이름은 center_div이다. 그리고 이 css 클래스는 border(테두리)를 1픽셀 두께만큼 실선으로 그린다.

이 css 클래스를 버튼이 있는 div에 적용한다.

<div className='center_div'>
  <button>출/퇴근</button>
</div>

react에서는 class가 아닌 className 으로 css 클래스를 설정한다.

가만보면 영역이 매우 작다. 아래 낢짜와 숫자 부분만으로 영역이 정혀졌다. 만약 이 상태에서 가운데 정렬을 시키면, 저 검은색 테두리 부분 안에서만 가운데 정렬이 될 거기 때문에 아무 의미없다. 일단 이 상태에서라도 가운데 정렬을 해보면,

index.css 파일을 다시 이렇게 수정한다.

.center_div
{
  border: 1px solid;
  text-align: center;
}

예상대로 검은 테두리 선 내에서반 가운데 정렬이 이루어졌다. 가운데 정렬할 범위를 넓혀줘야 한다.

다시 index.css 파일을 수정하자.

.center_div
{
  border: 1px solid;
  text-align: center;
  width: 100vw;
}

100vw에서 vw은 Viewport Width라는 뜻이다. viewport는 화면에 보이는 영역이다. 웹브라우저에서 글자가 보여지는 영역이 viewport이다.

1vw는 웹브라우저 폭의 1%라는 뜻이다. 100vw는 웹브라우저 폭의 100%라는 뜻이다.

그래서 웹브라우저의 폭을 모두 쓰게 된다.

스크롤바가 생긴 건 css로 border를 그렸기 때문이다. border는 영역의 바깥쪽에 선을 그리기 때문에 왼쪽에 1px, 오른쪽에 1px 선을 그리느라 스크롤바가 생겼다. 단지 div의 크기가 얼마나 되는지 보기 위해 선을 그렸으니 border는 이제 없애도 된다.

.center_div
{
  text-align: center;
  width: 100vw;
}

이제 버튼은 가운데로 오는 문제가 해결되었다.

아래 시각을 가운데로 옮겨야 하는데 각각 가운데로 옮기지 않고, 보통은 아래와 같이 하나의 div로 묶어 가운데로 옮기는 방법을 사용한다.

return (
    <>
      <div className='center_div'>
        <div>
          <button>출/퇴근</button>
        </div>
        <div>
          {getdate()}
        </div>
      </div>
    </>
  )

버튼 누르면 동작하게 만들기

지금은 앱 시작하자마자 시간이 바로 표시되는데 사실은 버튼을 누를 때의 시간을 기록하는 게 목적이다. 그러니 버튼을 누르기 전까지는 시간이 표시되면 안 된다.

return (
  <>
    <div className='center_div'>
      <div>
        <button>출/퇴근</button>
      </div>
      <div>
      </div>
    </div>
  </>
)

그래서 일단 위와 같이 시간 표시되는 부분을 없앴다.

react의 상태 관리 매커니즘을 이용해 버튼 누를 때의 시간을 기록하고 보여주자.

import {useState} from 'react';

function App() {
  const [did_time, set_did_time] = useState("");

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

  function checkTime()
  {
    let current_time = getdate()
    set_did_time(current_time)
  }

  return (
    <>
      <div className="center_div">
        <div>
          <button onClick={checkTime}>출/퇴근</button>
        </div>
        <div>
          {did_time}
        </div>
      </div>
    </>
  )
}

export default App

실행 직후. 버튼을 누르지 않으면 시간 관련 값이 세팅되어 있지 않으니 화면에 시간이 표시되지 않는다.

버튼을 누르면 onClick에 의해 checkTime 함수가 실행된다.

checkTime 함수는 지금 시각을 getdate() 함수를 통해 가져오고,

이 시간 정보는 set_did_time() 함수를 통해 did_time 값을 세팅하고,

그렇게 되면 결국 react의 상태 관리 매커니즘에 따라 자동으로 그 아래쪽에 버튼을 누른 시각이 바뀐다. 처음에는 아무것도 없었으니 나타나는 것처럼 보인다.

계속 버튼을 누르면 누를 때마다 시간이 바뀌는 걸 볼 수 있다.