문제점

1. Table 컴포넌트가 너무 어수선하다.

기존 코드 보러 가기

<aside> 💡 Table의 요소를 생각해보면 box, header, body, row, cell 와 같이 여러개로 나누어질 수 있습니다. 하지만 지금의 Table 은 하나의 파일에 모든걸 응축시켜 놓아서 알아보기 힘들고, 수정하기 어려운 코드가 되었습니다. 또한 Table 파일 내에 dataProps, 상수, 유틸함수 또한 포함되어 있습니다.

</aside>

return tableData.length === 0 ? (
    <EmptyContainer>
      <BsFillInboxFill />
      <EmptyMessage>검색 결과가 없습니다.</EmptyMessage>
    </EmptyContainer>
  ) : (
    <Container>
      <StyledTable>
        <thead>
          <TableHeader>
            {dataProps.map((props, index) => (
              <th key={`${props} ${index}`} className={`${props}_table`}>
                {dataPropsMapper[props].title}
              </th>
            ))}
          </TableHeader>
        </thead>
        <tbody>
.... (코드가 너무 길어서 생략했습니다. 더 보기를 원하시면 [여기를 눌러주세요.](<https://github.com/simian114/wanted-preOnBoarding-project3/blob/32f3c0f439c94b62771c953c075d7468ebd2408f/src/components/Table/table.jsx>))

2. Table 컴포넌트 내부에서 data 를 조작한다.

기존 코드 보러 가기

<aside> 💡 Table 컴포넌트는 내부 데이터를 조작하는게 아니라, 단순히 상위 컴포넌트에서 전달해준 데이터를 보여주기만 해야합니다. 하지만 지금은 내부의 데이터를 조작하는 코드가 있습니다. 더불어서 Table 컴포넌트는 자신이 현재 보여주고 있는 데이터만을 들고 있으면 되는데, 현재 page 에 해당하지 않는 모든 데이터를 다 들고 있습니다**.**

</aside>

const Table = ({ dataProps, currentPageData, tableData, setTableData }) => {
  const handleEditUserRole = data => {
    setUserInfo(data);
    const newTableData = tableData;
    const index = tableData.findIndex(user => user.id === data.id);
    if (index !== -1) {
      newTableData[index] = data;
      setTableData([...newTableData]);
    }
  };
...
}

리팩토링

1. Table 컴포넌트 나누기

🚀 커밋 보러가기

<aside> 💡 Header, Body, Row, Cell 로 나누겠습니다. 더불어서 기존 코드에서 사용하던 중첨 삼항연산자, 이상하게 만들어진 조건문 등을 제거했습니다.

</aside>

TableHeader

👨🏽‍💻 코드는 여기서 확인할 수 있습니다.

기존에 TableHeader 가 있었습니다. 하지만 TableHeader 가 thead 를 담당하는게 아닌 Title 를 담당한다고 생각해서 기존의 TableHeader 는 TableTitle 로 변경하고, thead 를 감싸는 부분을 TableHeader 로 변경했습니다.

TableBody

👨🏽‍💻 코드는 여기서 확인할 수 있습니다.

TableBody 는 tbody 로 감싸지는 부분입니다. 해당 컴포넌트는 주어진 데이터로 반복을 돌면서 TableRow 를 찍어내는 역할을 합니다.