8월 9일 코드 리뷰 리팩토링 과정을 진행했습니다.

👏저희 팀이 이번에 참고하면 좋을 과제로 선정이 되었습니다 !

코드 리팩토링

부끄럽게도 오늘 코드 리뷰 때 리팩토링할 코드로 제 코드가 나왔습니다. 😂
문제 분석과 리팩토링을 진행해 봤습니다.

문제 코드

const UserData = ({ userData }) => {
  return (
    <>
      {userData
        ? userData.map((data) => (
            <tr key={data.id}>
              <td>{data.id}</td>
              <td>{data.userType}</td>
              ...
            </tr>
          ))
        : null}
    </>
  );
};

안 좋은 코드인 이유

삼항연산자, && 연산자에 대해

삼항 연산자는 조건부 렌더링을 할 수 있게 해주는 팁입니다. 하지만 요소 길이가 길어질 때가 많아서 가독성을 안 좋아질 수 있습니다. 따라서 같은 기능을 하는 && 연산자를 사용할 수 있다면 사용해야 합니다.

삼항연산자를 사용한 이유

삼항연산자를 사용한 이유는 <tbody> 태그 내에서 && 연산자를 사용하면 오류가 났기 때문입니다.
다시 사용해보니 오류가 안 나네요. 개인적인 실수였던 것 같습니다.

리팩토링

&& 연산자 이용

<>
  {TableData && TableData.map((data) => (
    <tr key={data.id}>
      <td>{data.id}</td>
      ...
    </tr>
  ))}
</>

더 나은 방법

부모 컴포넌트에서 props를 체크하고 전달하기

사실 위와 같은 경우 && 연산자를 썼다 하더라도 잘못된 코드입니다. map은 Array 메서드이기 때문에 TableData의 타입을 알 수 없어 오류가 날 수 있는 상황이기 때문입니다. 또 TableData가 빈 배열이라면 컴포넌트가 렌더링 될 필요가 없습니다. 따라서 부모 컴포넌트에서 빈 배열인지 체크하고 아닐 때 컴포넌트를 실행하는 로직으로 구현하면 됩니다.

// 부모 컴포넌트
<table>
  <thead>...</thead>
  // 빈 배열이면 컴포넌트 렌더링 자체를 막는다.
  {currentUserData.length > 0 && (
    <tbody>
      <TableData TableData={currentUserData} />
    </tbody>
  )}
</table>;

// 자식 컴포넌트
const TableData = ({ TableData }) => {
  return (
    <>
      {TableData.map((data) => (
        <tr key={data.id}>
          <td>{data.id}</td>
          <td>{data.name}</td>
          ...
        </tr>
      ))}
    </>
  );
};