React 리스트 렌더링 시 'key' 오류 해결 방법 및 주의사항

React에서 key는 리스트 렌더링 시 각 항목을 고유하게 식별하기 위해 사용됩니다. key는 리스트의 각 항목이 고유해야 하며, React가 DOM 업데이트를 효율적으로 처리할 수 있도록 돕습니다.

현재 코드에서 TableRow에 key={props.pageName}을 사용하고 있지만, props.pageName이 고유하지 않거나 중복될 가능성이 있어 React가 경고를 발생시키는 것으로 보입니다.

---

문제 원인

• props.pageName은 고유하지 않을 가능성이 있습니다. 예를 들어, props.pageName이 "order" 또는 "settle"과 같이 고정된 값이라면, 동일한 값이 여러 번 사용될 수 있습니다.
• React는 리스트의 각 항목이 고유한 key를 가져야 한다고 요구합니다.

---

해결 방법

key를 고유하게 설정하기 위해 아래 방법 중 하나를 사용할 수 있습니다.

---

1. dataTitle 배열의 인덱스를 사용

dataTitle 배열의 인덱스를 key로 사용하면 고유한 값을 보장할 수 있습니다.

 

 

<TableRow key={`row-${props.pageName}-${i}`}>

  {titleCell()}

</TableRow>

 

 

---

2. props.pageName과 배열 인덱스를 조합

props.pageName과 배열의 인덱스를 조합하여 고유한 key를 생성합니다.

 

 

<TableRow key={`${props.pageName}-${index}`}>

  {titleCell()}

</TableRow>

 

 

---

3. dataTitle의 고유 값 사용

dataTitle 배열의 값이 고유하다면, 이를 key로 사용할 수 있습니다.

 

 

<TableRow key={dataTitle[i]}>

  {titleCell()}

</TableRow>

 

 

---

4. titleCell 함수 내부에서 key 설정

titleCell 함수 내부에서 TableCell에 고유한 key를 설정합니다.

 

 

const titleCell = () => {

  return dataTitle.map((title, index) => (

    <TableCell align="center" key={`title-${index}`}>{title}</TableCell>

  ));

};

 

 

---

수정된 코드

아래는 위의 방법을 적용한 수정된 코드입니다.

 

 

<TableRow key={`row-${props.pageName}`}>

  {titleCell()}

</TableRow>

 

 

 

 

또는 titleCell 함수 내부에서 key를 설정하는 방식:

 

 

const titleCell = () => {

  return dataTitle.map((title, index) => (

    <TableCell align="center" key={`title-${index}`}>{title}</TableCell>

  ));

};

 

<TableRow key={`row-${props.pageName}`}>

  {titleCell()}

</TableRow>

 

 

---

결론

React의 key 경고를 해결하려면, 리스트의 각 항목이 고유한 key를 가지도록 설정해야 합니다. 위의 방법 중 하나를 적용하면 경고가 사라질 것입니다. 가장 적합한 방법은 dataTitle 배열의 고유 값이나 인덱스를 활용하는 것입니다.