[ESLint] no-unused-prop-types 에러

루나·2022년 8월 18일
1

'onPageChange' PropType is defined but prop is never used
eslint(react/no-unused-prop-types)

export interface TableFooterProps {
  tableList: CategoryView[]
  page: number
  rowsPerPage: number
  //이하 세개의 함수에서 에러
  onPageChange: (page: number) => void
  onRowsPerPageChange: (page: number) => void
  setEmptyRows: (page: number) => void
}

export default function TableListFooter(props: TableFooterProps) {
  const { tableList, page, rowsPerPage } = props
  const {
    TablePaginationActionsComponent,
    handleChangePage,
    handleChangeRowsPerPage,
  } = useTableFooter({ ...props, count: tableList.length })

  return (
    ...
  )
}

React-TS 컴포넌트에서 프롭스로 받아오는 함수를 사용하지 않으면 해당 에러가 발생한다.
이 코드에선 프롭스로 넘겨받은 함수를 또다시 다른 함수에 프롭스로 넘겨주는데 구조 분해 할당을 사용해서 넘겨줬더니 현재 함수에선 한번도 사용하지 않았다고 불평하는 것이었다.
이를 해결하기 위한 방법으론 여러가지가 있었다.

props를 직접 하나하나 할당해주기

export default function TableListFooter({
  tableList,
  page,
  rowsPerPage,
  onPageChange,
  onRowsPerPageChange,
  setEmptyRows,
}: TableFooterProps) {
  const {
    TablePaginationActionsComponent,
    handleChangePage,
    handleChangeRowsPerPage,
  } = useTableFooter(
    tableList,
    page,
    rowsPerPage,
    onPageChange,
    onRowsPerPageChange,
    setEmptyRows,
  )

이렇게 하나하나 직접 명시해주면 어찌됐든 사용은 했기때문에 위의 에러도 사라지고 올바르게 동작할 수 있다. 하지만 코드가 매우 길어지고 더러워진다.
사실 원래 코드의 상태는 이와 같았으며 이런 현상을 막기 위해서 props를 일일이 푸는 대신에 묶어서 일부분만 사용하는 방법을 찾는 중이었고 그렇기때문에 이 방법으로 돌아가고 싶진 않았다.

eslint 설정에서 끄기

...
"rules": {
  ...
  "react/no-unused-prop-types": ["off"],
  ...
}
...

제일 간단한 해결방법이지만 잠재적 문제점이 발생할 수도 있다고 생각했기 때문에 내키지 않았다.

✅ 사용하지 않는 함수를 할당만 하고 넘기기

export default function TableListFooter(props: TableFooterProps) {
  const { tableList, page, rowsPerPage, ..._ } = props
  const {
    TablePaginationActionsComponent,
    handleChangePage,
    handleChangeRowsPerPage,
  } = useTableFooter(props)

현재는 이 방법을 선택했다. Go 등의 언어에선 사용하지 않는 변수를 _로 처리하기도 하고 이 방법 외엔 가독성이나 안정성면에서 깔끔하지 못하다고 생각했다.
(지역변수) _가 선언되었지만 사용하지 않았다는 워닝이 발생하긴 하지만 이 선에서 타협하기로 했다.


구현만 하는 것보다 코드를 얼마나 보기 좋게 만드냐를 고민하는 시간이 훨씬 더 많아졌으며 이런 일을 줄이기 위해 처음부터 설계나 규칙을 얼마나 잘 맞춰야 하는지 깨달았다.

profile
백엔드 개발자

0개의 댓글