차 잘 잠궜나 확인 추가

차 잘 잠궜나 확인하는 기능도 추가해서 다음과 같은 모양이 되게 하고 싶다.

이렇게 하려면 아래와 같이

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

똑같은 코드를 복사해 놓는 걸 우선 생각할 거다. 당연하다.

그리고 출퇴근 용 시간 상태 정보와 차 잠궜는지에 대한 시간 상태 정보를 따로 두는 등 코드가 조금 복잡해진다.

그런데 react는 부품들을 만들어 놓고 조립해 사용하는 형태로 쓰기 때문에 저렇게 같은 일을 하는 코드를 중복해서 사용하는 걸 싫어한다.

컴퍼넌트란

출퇴근 확인 버튼을 부품, 컴퍼넌트 형태로 바꿔 사용해 보자.

지금 쓰고 있는 컴퓨터 키보드를 봐라. A키와 B키, C키… 등등을 보면 모두 같은 모양의 키이고 누르면 들어갔다 나오는 등 똑같은 동작을 하는데 그 위에 인쇄만 A, B, C라고 해 놓고 누를 때마다 컴퓨터로 전달되는 값만 다르게 해놨다.

이렇게 키보드의 키처럼 똑같이 생겼지만 정해준 값에 따라 다르게 일하는 녀석들을 부품, 컴퍼넌트라고 한다.

지금까지 만든 걸 컴퍼넌트 형태로 바꾸고 그 컴퍼넌트를 이용하는 형태로 바꿔보자.

지금까지 만든 걸 컴퍼넌트로 바꾸면 버튼 하나, 그 밑에 시간 정보 표시 하나가 있는 그런 모양의 컴퍼넌트가 된다.

이런 컴퍼넌트가 되는거다. 만약 ‘차 잠궜나’ 같은 기능이 필요하면

와 같이 컴퍼넌트를 2개 놓으면 된다.

컴퍼넌트의 생성

DidTime이라는 이름의 컴퍼넌트를 만들자.

vscode에서

마우스를 위쪽으로 가져가면 저렇게 생긴 아이콘이 나타난다. 저 파일을 누르면 새 파일이 생성된다.

src\DidTime.jsx 파일을 만들고 그 파일의 내용을 다음과 같이 한다.

만드는 방법은 간단한데, App.jsx 파일의 내용을 그대로 복사해서 붙여넣고 App만 DidTime으로 2군데 고친다. 3번째 줄과 맨 마지막 줄.

// src/DidTime.jsx
import {useState} from 'react';

function DidTime() {
  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 DidTime

이렇게 하면

이런 컴퍼넌트가 하나 생긴거다. 컴퍼넌트 이름은 DidTime이고.

이제 App.jsx 파일을 수정해서 이 컴퍼넌트를 사용하도록 해보자.

우선 App.jsx의 기능을 전부 DidTime 컴퍼넌트에게 줬으니 이제 App.jsx에서는 불필요하게 된 부분은 싹 지워보자.

// src/App.jsx

function App() {

  return (
    <>
    </>
  )
}

export default App

맨 처음에 정리했던 그 모습이 되었다.

이제 App.jsx에서 DidTime 컴퍼넌트를 사용해 보자.

// src/App.jsx

import DidTime from "./DidTime"

function App() {

  return (
    <>
      <DidTime />
    </>
  )
}

export default App

쉽게 컴퍼넌트 형태로 고쳤고, 그 컴퍼넌트를 사용하는 형태로 고쳤는데 이전과 똑같이 잘 동작하고 있다.

컴퍼넌트 하나 더 추가해서 차 잠궛는지 확인해 보자.

// src/App.jsx

import DidTime from "./DidTime"

function App() {

  return (
    <>
      <DidTime />
      <DidTime />
    </>
  )
}

export default App

두 개의 컴퍼넌트가 각각 따로 동작하는 건 확인할 수 있다. 각각의 컴퍼넌트는 각각 상태를 관리하기 때문이다.

그런데 큰 문제가 2개 있다.

하나는 위아래가 너무 붙은 거고,

하나는 둘다 출/퇴근 버튼을 가졌다는 거다. 이름을 달리해야 한다.

먼저 위아래가 너무 붙은 문제부터 해결하자.

또 css의 도움을 받아야 한다.

index.css 파일의 맨 끝에 다음 클래스를 추가하자.

.components
{
  display: flex;
  flex-direction: column;
  gap: 30px;
}

이 css는 세로로 길게 요소들을 배치하고 그 요소들의 세로 간격은 30픽셀만큼 떨어뜨리라는 것이다.

이 css 클래스를 App.jsx에 반영한다.

<div className='components'>
  <DidTime />
  <DidTime />
</div>

전체 App.jsx 파일은 다음과 같다.

// src\App.jsx

import DidTime from "./DidTime"
function App() {

  return (
    <>
      <div className='components'>
        <DidTime />
        <DidTime />
      </div>          
    </>
  )
}

export default App

2개의 컴퍼넌트들간의 세로 간격이 30픽셀만큼 벌어졌다.

컴퍼넌트에 값 전달

버튼의 이름을 컴퍼넌트마다 다르게 해야 한다.

그러기 위해서는 App.jsx 파일에서 컴퍼넌트를 사용할 때마다 ‘너가 가진 버튼의 이름은 OOO이다’ 라고 알려줘야 한다.

먼저 DidTime.jsx 파일을 수정해 DidTime 컴퍼넌트를 고쳐보자.

DidTime.jsx 파일의 세번째 줄이

function DidTime() {

인데 이 부분을

function DidTime( {title} ) {

으로 바꾸자.

이렇게 하면 이 DidTime 컴퍼넌트는 ‘나한테 title 이라는 이름의 변수로 값을 넘겨주면 내가 내부적으로 사용할께’ 라고 선언하는 것과 같다.

이 컴퍼넌트를 사용하는 App.jsx 파일에서는 DidTime 컴퍼넌트에게 title 값을 다음과 같이 넘겨줄 수 있다.

// src\App.jsx

<DidTime title = "출/퇴근" />
<DidTime title = "차 잠궜나"/>

그럼 DidTime 컴퍼넌트에서는 이 값을 내부적으로 자유롭게 사용할 수 있는데, 우리는 버튼 이름을 바꾸는 데 사용할 거다.

// src\DidTime.jsx

<button onClick={checkTime}>{title}</button>

버튼의 이름을 바꾸기 위해 {title} 을 사용했다.

App.jsx 파일의 전체 파일은 다음과 같다.

import DidTime from "./DidTime"
function App() {

  return (
    <>
      <div className='components'>
        <DidTime title = "출/퇴근" />
        <DidTime title = "차 잠궜나"/>
      </div>          
    </>
  )
}

export default App

import {useState} from 'react';

function DidTime( {title }) {
  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}>{title}</button>
        </div>
        <div>
          {did_time}
        </div>
      </div>
    </>
  )
}

export default DidTime

Keyboard shortcuts

Eugene's Board

차 잘 잠궜나 확인 추가

컴퍼넌트란

컴퍼넌트의 생성

컴퍼넌트에 값 전달