ESLint 'react/no-array-index-key' 규칙

[jindonyy]

현재 Table 컴포넌트를 만들다 key의 값으로 index를 사용해야하는 경우가 생겼습니다.

export interface TableProps extends TableDefaultProps {
  caption: string;
  columnsWidth?: string[];
}

...

const Table = ({ caption, columnsWidth, children }: TableProps) => (
 ....
  <colgroup>
    {columnsWidth.map((width, index) => (
       <col key={index} width={width} />
     ))}
  </colgroup>
  ...
);

아시다시피 key 로 index는 리스트가 유동적으로 변하는 경우가 아니라면 사용해도 되는데요.
그래서 해당 규칙을 끄려고 했으나 모든 개발자가 다 안다는 전제 하에 꺼도 되는거니 불안하다는 의견이 나와 다른 방법을 쓰는게 나을지 의견을 듣고자 합니다.

현재 Table PR에서 논의로 나온 의견을 아래와 같습니다.

1. off
   현재 프로젝트에 참여하는 인원이 모두 사용해도 되는걸 알기 때문에 off 해도 된다.
2. warn
   타입스크립트에서 any를 쓸 때 경고가 뜬다. any를 써도 되는 상황 맞아? 라고 경고 하는거니 어쩔 수 없이 써야한다고 생각하면 그냥 쓸테고 바꿀 수 있다면 개발자가 경고를 보고 바꾸려고 할테니 경고하는 정도가 좋을 듯 하다.
3. 개발자가 꺼도 되는 상황이라 판단되는 부분애는 에러를 끄는 주석을 사용

// eslint-disable-next-line react/no-array-index-key
<col key={index} width={width} />

4. id를 생성해주는 util 함수를 추가

const getIdForKey = (idName: string, array: any[]) =>
  array.map((value, index) => ({ id: idName + index, value }));

다른 의견이 있으면 댓글로 남겨주세요!

[jindonyy]

저는 4번 방법은 array의 배열이 객체로 된 배열이면 살짝 번거로울 수도 있고 사용하면 안되는 상황이 아닌데 코드가 길어진다는 점도 있다고 생각합니다. 주석이나 warn으로 하면 개발자가 한번 더 생각해볼 수 있으니 두 방법이 괜찮은거 같아요! 코드 상에서 주석으로 표시하냐 개발창에서 표시하냐의 차이인데.. 저는 경고창이 맘아프긴 하지만 개발자 모드에서 보이는게 나을듯..하여? warn으로 투표하였습니다.

[healtheloper]

저는 일단 warn 으로 하긴 했는데, warn 도 console 상으로 오류를 내고있고 warn 인 부분은 모두 없애주는게 맞다고 생각해서
개발자가 꺼도 되는 상황인지 판단하여 주석도 같이 사용하는게 좋겠다고 생각합니다. (+ 주석 이유도 같이 작성)

[jindonyy]

(+ 주석 이유도 같이 작성)

그런데 리스트가 유동적으로 변할 때 외에는 사용이 가능하니 끌 때마다 이유가 같지 않을까요??

[healtheloper]

같긴 하겠지만 저희가 아닌 제 3자가 봤을 때는 그 이유를 궁금할 수도 있겠다고 생각했어요

[mina-gwak]

사용을 안하는 것을 디폴트로 하되 타당한 이유가 있을 땐 사용 가능한 거니까 주석으로 에러를 꺼주고 파크가 말씀하신 것처럼 이유를 남기는 것도 좋을 것 같다고 생각했어요. 이렇게 한다면 warn으로 하나 그냥 냅두나 크게 상관이 없을 것 같아서 3번으로 투표했습니다!

[hemudi]

최종적으로는 warn으로 처리하는 것이 좋은데 현재는 특정 부분에서만 쓰이니 주석으로 처리하고 파크께서 말씀해주신대로 이유도 함께 남기는게 좋을 것 같아서 3번에 투표했습니다! @_@)b
둘 중에 도니께서 원하시는 방향으로 결론지어 주시면 될 것 같아요!

[jindonyy]

주석으로 이유를 다는 부분에 모두 동의를 하니 주석으로 끄는 걸로 결정하겠습니다!

// 유동적으로 변하지 않는 리스트
// eslint-disable-next-line react/no-array-index-key
<col key={index} width={width} />