기존에 반복되고 동적으로 반영되지 않던 코드를 동적으로 반영하고 중복 코드를 최소화하고자 리팩토링을 하였다.

리팩토링을 한 부분은 한 명 직원의 학력을 출력하는 코드이다.

리팩토리 전

기존 코드는 tbody 부분에 각각 고등학교, 대학교, 대학원에 대한 정보를 삽입해야 했다.

👇 EmpEdu.jsx

import React from 'react';
import Table from 'react-bootstrap/Table';

const EmpEdu = ({ empDetail }) => {
  const h_eduPeriod = empDetail? empDetail.HIGH_SCHOOL_PERIOD : '';
  const h_eduName = empDetail? empDetail.HIGH_SCHOOL_NAME : '';
  const h_eduMajor = empDetail? empDetail.HIGH_SCHOOL_MAJOR : '';
  const h_eduStatus = empDetail? empDetail.HIGH_SCHOOL_STATUS : '';
  const u_eduPeriod = empDetail? empDetail.UNIVERSITY_PERIOD : '';
  const u_eduName = empDetail? empDetail.UNIVERSITY_NAME : '';
  const u_eduMajor = empDetail? empDetail.UNIVERSITY_MAJOR : '';
  const u_eduStatus = empDetail? empDetail.UNIVERSITY_STATUS : '';
  const g_eduPeriod = empDetail? empDetail.GRADUATE_SCHOOL_PERIOD : '';
  const g_eduName = empDetail? empDetail.GRADUATE_SCHOOL_NAME : '';
  const g_eduMajor = empDetail? empDetail.GRADUATE_SCHOOL_MAJOR : '';
  const g_eduStatus = empDetail? empDetail.GRADUATE_SCHOOL_STATUS : '';

  return (
    <div style={{ padding: '20px', borderLeft: '1px solid' }}>
      <h5>직원 기초 정보</h5>
      <Table striped bordered hover>
      <thead>
        <tr>
          <th>#</th>
          <th>기간</th>
          <th>학교명</th>
          <th>학과명</th>
          <th>졸업구분</th>
        </tr>
      </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>{h_eduPeriod}</td>
            <td>{h_eduName}</td>
            <td>{h_eduMajor}</td>
            <td>{h_eduStatus}</td>
            
          </tr>
          <tr>
            <td>2</td>            
            <td>{u_eduPeriod}</td>
            <td>{u_eduName}</td>
            <td>{u_eduMajor}</td>            
            <td>{u_eduStatus}</td>            
          </tr>
          <tr>
            <td>3</td>
            <td>{g_eduPeriod}</td>
            <td>{g_eduName}</td>
            <td>{g_eduMajor}</td>
            <td>{g_eduStatus}</td>
          </tr>
        </tbody>
      </Table>
    </div>
  );
};

export default EmpEdu;

리팩토리 후

EmpEduRow.jsx 컴포넌트를 생성하여 tbody에 들어갈 정보를 정의하였다.

👇 EmpEduRow.jsx

import React from 'react';

const EmpEduRow = ({ eduPeriod, eduName, eduMajor, eduStatus }) => {
  return (
    <tr>
      <td>{eduPeriod}</td>
      <td>{eduName}</td>
      <td>{eduMajor}</td>
      <td>{eduStatus}</td>
    </tr>
  );
};

export default EmpEduRow;

이를 EmpEdu에 import하여 추가했다.

👇 EmpEdu.jsx

import React from 'react';
import Table from 'react-bootstrap/Table';
import EmpEduRow from './EmpEduRow'; // Assuming EmpEduRow is in the same directory

const EmpEdu = ({ empDetail }) => {
  const h_eduPeriod = empDetail ? empDetail.HIGH_SCHOOL_PERIOD : '';
  const h_eduName = empDetail ? empDetail.HIGH_SCHOOL_NAME : '';
  const h_eduMajor = empDetail ? empDetail.HIGH_SCHOOL_MAJOR : '';
  const h_eduStatus = empDetail ? empDetail.HIGH_SCHOOL_STATUS : '';
  const u_eduPeriod = empDetail ? empDetail.UNIVERSITY_PERIOD : '';
  const u_eduName = empDetail ? empDetail.UNIVERSITY_NAME : '';
  const u_eduMajor = empDetail ? empDetail.UNIVERSITY_MAJOR : '';
  const u_eduStatus = empDetail ? empDetail.UNIVERSITY_STATUS : '';
  const g_eduPeriod = empDetail ? empDetail.GRADUATE_SCHOOL_PERIOD : '';
  const g_eduName = empDetail ? empDetail.GRADUATE_SCHOOL_NAME : '';
  const g_eduMajor = empDetail ? empDetail.GRADUATE_SCHOOL_MAJOR : '';
  const g_eduStatus = empDetail ? empDetail.GRADUATE_SCHOOL_STATUS : '';

  return (
    <div style={{ padding: '20px', borderLeft: '1px solid' }}>
      <h5>직원 기초 정보</h5>
      <Table striped bordered hover>
        <thead>
          <tr>
            <th>기간</th>
            <th>학교명</th>
            <th>학과명</th>
            <th>졸업구분</th>
          </tr>
        </thead>
        <tbody>
          <EmpEduRow eduPeriod={h_eduPeriod} eduName={h_eduName} eduMajor={h_eduMajor} eduStatus={h_eduStatus} />
          <EmpEduRow eduPeriod={u_eduPeriod} eduName={u_eduName} eduMajor={u_eduMajor} eduStatus={u_eduStatus} />
          <EmpEduRow eduPeriod={g_eduPeriod} eduName={g_eduName} eduMajor={g_eduMajor} eduStatus={g_eduStatus} />
        </tbody>
      </Table>
    </div>
  );
};

export default EmpEdu;

컴포넌트를 모듈화하여 재사용성을 높이면서도 중복코드를 최소화할 수 있게 되었다.