DB에서 입사일과 퇴사일을 date 타입으로 설정하였다.
이를 프론트로 가져오면 시간까지 가져오게 되는데 이를 'YYYY-MM-DD' 형식으로 변환하고자 한다.
또한 텍스트로 받고 input type='date'로 설정하여 달력으로 날짜를 선택하게 변경하려고 한다.

Moment install

npm install moment --save

기존 코드

Moment 라이브러리를 사용했으나 전체 사원 목록 중 한 명의 사원을 클릭하지 않았음에도 상세정보 칸에서 입사일과 퇴사일은 현재 날짜가 표기되고 있었다.

import React from 'react';
import Table from 'react-bootstrap/Table';
import styles from './empDetailInfo.module.css'
import Moment from 'moment'

const EmpDetail = ({ empDetail }) => {
  const eNo = empDetail ? empDetail.E_NO : '';
  const eName = empDetail ? empDetail.E_NAME : '';
  const eGender = empDetail ? empDetail.E_GENDER : '';
  const eBirth = empDetail ? empDetail.E_BIRTH : '';
  const ePhone = empDetail ? empDetail.E_PHONE : '';
  const eHiredate = empDetail ? Moment(empDetail.E_HIREDATE).format('YYYY-MM-DD') : ''; // Format hire date
  const eEnddate = empDetail ? Moment(empDetail.E_ENDDATE).format('YYYY-MM-DD') : ''; // Format end date
  const eAddress = empDetail ? empDetail.E_ADDRESS : '';
  const eAuth = empDetail ? empDetail.E_AUTH : '';
  const eEmail = empDetail ? empDetail.E_EMAIL : '';
  const eStatus = empDetail ? empDetail.E_STATUS : '';
  const eRank = empDetail ? empDetail.E_RANK : '';
  const ePassword = empDetail ? empDetail.E_PASSWORD : '';
  const deptName = empDetail ? empDetail.DEPT_NAME : '';
  const eOccup = empDetail ? empDetail.E_OCCUP : '';

  return (
    <div style={{ padding: '20px', borderLeft: '1px solid' }}>
      <h5>직원 상세 정보</h5>
      <div className={styles.empInfoWrap}>
        <div className={styles.empPicture}>
          사진
        </div>
        <div className={styles.empInfo1}>
          사원명
          <input type='text' style={{ border: 'none', background: 'transparent', width: '180px', margin: '5px', paddingLeft: '80px' }} value={eName} />
        </div>
        <div className={styles.empInfo2}>
          성별
          <input type='text' style={{ border: 'none', background: 'transparent', margin: '5px', paddingLeft: '50px' }} value={eGender} />
        </div>
        <div className={styles.empInfo3}>
          생년월일
          <input type='date' style={{ border: 'none', background: 'transparent', margin: '5px', paddingLeft: '50px' }} value={eBirth} />
        </div>
        <div className={styles.empInfo4}>
          사원번호
          <input type='date' style={{ border: 'none', background: 'transparent', margin: '5px', paddingLeft: '50px' }} value={eNo} />
        </div>
        <div className={styles.empInfo5}>
          입사일
          <input type='date' style={{ border: 'none', background: 'transparent', margin: '5px', paddingLeft: '50px' }} value={eHiredate} />
        </div>
        <div className={styles.empInfo6}>
          퇴사일
          <input type='' style={{ border: 'none', background: 'transparent', margin: '5px', paddingLeft: '50px' }} value={eEnddate} />
        </div>
        <div className={styles.empInfo7}>
          연락처
          <input type='text' style={{ border: 'none', background: 'transparent', margin: '5px', paddingLeft: '50px' }} value={ePhone} />
        </div>
        <div className={styles.empInfo8}>
          이메일
          <input type='text' style={{ border: 'none', background: 'transparent', margin: '5px', paddingLeft: '50px' }} value={eEmail} />
        </div>
        <div className={styles.empInfo9}>
          주소
          <input type='text' style={{ border: 'none', background: 'transparent', width: '510px', margin: '5px', paddingLeft: '50px' }} value={eAddress} />
        </div>
        <div className={styles.empInfo10}>
          부서
          <input type='text' style={{ border: 'none', background: 'transparent', margin: '5px', paddingLeft: '50px' }} value={deptName} />
        </div>
        <div className={styles.empInfo11}>
          비밀번호
          <input type='password' style={{ border: 'none', background: 'transparent', margin: '5px', paddingLeft: '50px' }} value={ePassword} />
        </div>
        <div className={styles.empInfo12}>
          권한
          <input type='text' style={{ border: 'none', background: 'transparent', margin: '5px', paddingLeft: '50px' }} value={eAuth} />
        </div>
        <div className={styles.empInfo13}>
          현황
          <input type='text' style={{ border: 'none', background: 'transparent', margin: '5px', paddingLeft: '50px' }} value={eStatus} />
        </div>
        <div className={styles.empInfo14}>
          직종
          <input type='text' style={{ border: 'none', background: 'transparent', margin: '5px', paddingLeft: '50px' }} value={eOccup} />
        </div>
        <div className={styles.empInfo15}>
          직급
          <input type='text' style={{ border: 'none', background: 'transparent', margin: '5px', paddingLeft: '50px' }} value={eRank} />
        </div>
      </div>
    </div>
  );
};

export default EmpDetail;

최종

선택된 사원이 없을 때 빈 값으로 처리하고 Moment 객체를 생성하기 전에 먼저 empDetail이 존재하는지 확인하여 처리하고자 하였다.
아래 코드는 empDetail과 해당 필드인 E_HIREDATE 또는 E_ENDDATE가 모두 존재하는 경우에만 Moment 객체를 생성하고 포맷팅을 수행한다. 그렇지 않은 경우에는 빈 문자열을 반환하여 연도-월-일 형식만 출력되게 된다.

import React from 'react';
import Table from 'react-bootstrap/Table';
import styles from './empDetailInfo.module.css'
import Moment from 'moment'

const EmpDetail = ({ empDetail }) => {
  const eNo = empDetail? empDetail.E_NO : '';
  const eName = empDetail? empDetail.E_NAME : '';
  const eGender = empDetail? empDetail.E_GENDER : '';
  const eBirth = empDetail? empDetail.E_BIRTH : '';
  const ePhone = empDetail? empDetail.E_PHONE : '';
  const eHiredate = empDetail && empDetail.E_HIREDATE ? Moment(empDetail.E_HIREDATE).format('YYYY-MM-DD') : '';
  const eEnddate = empDetail && empDetail.E_ENDDATE ? Moment(empDetail.E_ENDDATE).format('YYYY-MM-DD') : '';
  const eAddress = empDetail? empDetail.E_ADDRESS : '';
  const eAuth = empDetail? empDetail.E_AUTH : '';
  const eEmail = empDetail? empDetail.E_EMAIL : '';
  const eStatus = empDetail? empDetail.E_STATUS : '';
  const eRank = empDetail? empDetail.E_RANK : '';
  const ePassword = empDetail? empDetail.E_PASSWORD : '';
  const deptName = empDetail? empDetail.DEPT_NAME : '';
  const eOccup = empDetail? empDetail.E_OCCUP : '';

  return (
    <div style={{ padding: '20px', borderLeft: '1px solid' }}>
      <h5>직원 상세 정보</h5>
      <div className={styles.empInfoWrap}>
        <div className={styles.empPicture}>
          사진
        </div>
        <div className={styles.empInfo1}>
          사원명
          <input type='text' style={{ border: 'none', background: 'transparent', width: '180px', margin: '5px', paddingLeft: '80px' }} value={eName} />
        </div>
        <div className={styles.empInfo2}>
          성별
          <input type='text' style={{ border: 'none', background: 'transparent', margin: '5px', paddingLeft: '50px' }} value={eGender} />
        </div>
        <div className={styles.empInfo3}>
          생년월일
          <input type='date' style={{ border: 'none', background: 'transparent', margin: '5px', paddingLeft: '50px' }} value={eBirth} />
        </div>
        <div className={styles.empInfo4}>
          사원번호
          <input type='text' style={{ border: 'none', background: 'transparent', margin: '5px', paddingLeft: '50px' }} value={eNo} />
        </div>
        <div className={styles.empInfo5}>
          입사일
          <input type='date' style={{ border: 'none', background: 'transparent', margin: '5px', paddingLeft: '50px' }} value={eHiredate} />
        </div>
        <div className={styles.empInfo6}>
          퇴사일
          <input type='date' style={{ border: 'none', background: 'transparent', margin: '5px', paddingLeft: '50px' }} value={eEnddate} />
        </div>
        <div className={styles.empInfo7}>
          연락처
          <input type='text' style={{ border: 'none', background: 'transparent', margin: '5px', paddingLeft: '50px' }} value={ePhone} />
        </div>
        <div className={styles.empInfo8}>
          이메일
          <input type='text' style={{ border: 'none', background: 'transparent', margin: '5px', paddingLeft: '50px' }} value={eEmail} />
        </div>
        <div className={styles.empInfo9}>
          주소
          <input type='text' style={{ border: 'none', background: 'transparent', width: '510px', margin: '5px', paddingLeft: '50px' }} value={eAddress} />
        </div>
        <div className={styles.empInfo10}>
          부서
          <input type='text' style={{ border: 'none', background: 'transparent', margin: '5px', paddingLeft: '50px' }} value={deptName} />
        </div>
        <div className={styles.empInfo11}>
          비밀번호
          <input type='password' style={{ border: 'none', background: 'transparent', margin: '5px', paddingLeft: '50px' }} value={ePassword} />
        </div>
        <div className={styles.empInfo12}>
          권한
          <input type='text' style={{ border: 'none', background: 'transparent', margin: '5px', paddingLeft: '50px' }} value={eAuth} />
        </div>
        <div className={styles.empInfo13}>
          현황
          <input type='text' style={{ border: 'none', background: 'transparent', margin: '5px', paddingLeft: '50px' }} value={eStatus} />
        </div>
        <div className={styles.empInfo14}>
          직종
          <input type='text' style={{ border: 'none', background: 'transparent', margin: '5px', paddingLeft: '50px' }} value={eOccup} />
        </div>
        <div className={styles.empInfo15}>
          직급
          <input type='text' style={{ border: 'none', background: 'transparent', margin: '5px', paddingLeft: '50px' }} value={eRank} />
        </div>
      </div>
export default EmpDetail;