[Project] React - Component(컴포넌트) 분리하기

직원 전체 목록을 출력하는 코드는 반복되는 부분이기 때문에 EmpRow.jsx로 따로 분리하여

EmpListAll.jsx와 EmpRow.jsx로 분리하여 EmpRow에는 반복되는 코드를 넣고 EmpListAll에서는 tbody 태그 안에 EmpRow를 map으로 불러와 출력하도록 처리하였다.

👇 EmpListAll.jsx

import React, { useEffect, useState } from 'react';
import Table from 'react-bootstrap/Table';
import EmpRow from "./EmpRow";
import EmpDetail from './EmpDetail';
import { Button } from "react-bootstrap";
import styles from "./lsg.module.css";
import ExcelForm from './ExcelForm';

const EmpListAll = ({ empList, oneRow, empDetail }) => {
    /* const [emps, setEmps] = useState([{}]);
    const [selectedEmp, setSelectedEmp] = useState(null); */
    const [searchedEmps, setSearchedEmps] = useState([]);
    const [searchKeyword, setSearchKeyword] = useState('');

/*     const empSearch = (event) => {
        console.log(`empSearch ==> ${event.key}`);
        if (event.key === 'Enter') {
        empList();
        }
    } */

    const handleSearch = () => {
        const gubun = document.getElementById('gubun').value;
        const filteredList = empList.filter((emp) => {
            const value = emp[gubun];
            return value && value.includes(searchKeyword.trim());
        });
        setSearchedEmps(filteredList);
        console.log(filteredList);
    };
    // 전체조회 & 초기화 설정
    const handleShowAll = () => {
        setSearchedEmps([]); // 검색 결과 초기화
        setSearchKeyword(''); // 검색어 초기화
    }    

    return (
        <>
        <div className={styles.container}>
            <div className={styles.pageHeader}>
            <h5>
                직원목록
            </h5>
            <hr />
            </div>

            <div className={styles.row}>
            <div className="col-3">
                <select id="gubun" className="form-select" aria-label="분류">
                    <option defaultValue>분류</option>
                    <option value="e_name">사원명</option>
                    <option value="E_CURRENT">현황</option>
                    <option value="E_RANK">직급</option>
                </select>
            </div>
            <div className="col-6">
                <input
                type="text"
                id="keyword"
                className="form-control"
                placeholder="검색어를 입력하세요"
                aria-label="검색어를 입력하세요"
                aria-describedby="btn_search"
                onChange={(e) => setSearchKeyword(e.target.value)}
                value={searchKeyword}
                />
            </div>
            <div className="col-1">
                <Button variant="dark" id="btn_search" onClick={handleSearch}>
                검색
                </Button>
            </div>
            </div>

            <div className={styles.empList}>
            <Table responsive>
                <thead>
                <tr>
                    <th>사원번호</th>
                    <th>사원명</th>
                    <th>현황</th>
                    <th>직급</th>
                    <th>전화번호</th>
                </tr>
                </thead>
                <tbody>
                    {empList &&
                        empList.map((emp, key) => (
                            <EmpRow key={key} emp={emp} oneRow={oneRow} />
                        ))}
                </tbody>
            </Table>

            <hr />
            <div className={styles.empListFooter}>
                <div className="col-3">
                    <ExcelForm />
                </div>
                <Button variant="secondary" onClick={() => handleShowAll()}>
                전체조회
                </Button>
                &nbsp;
            </div>
            </div>
        </div>
        </>
    );
};

export default EmpListAll;

👇 EmpRow.jsx

import React from 'react';

const EmpRow = ({emp, oneRow}) => {
    console.log(emp);
    console.log(emp.E_CODE);
    return (
        <>
            <tr key={emp.E_CODE} onClick={() => oneRow(emp)}>
                <td>{emp.E_CODE}</td>
                <td>
                    {/* <Link to={`/emp/${emp.E_CODE}`} style={{ textDecoration: 'none', color: 'black'}}> */}
                        {emp.E_NAME}
                    {/* </Link> */}
                </td>
                <td>{emp.E_CURRENT}</td>
                <td>{emp.E_RANK}</td>
                <td>{emp.E_PHONE}</td>
            </tr>
        </>
    )
}

export default EmpRow