[React] 배열 렌더링 key 속성 오류 원인

문제 : React에서 배열 렌더링 도중 key 속성을 부여했음에도 불구하고 오류가 발생하였다.

//오류 코드
<div>
            {
                responseData?.map((el, idx)=>{
                    return(
                        <>
                        <Item key={idx} data={el}/>
                        </>
                    )
                })
            }
</div>

원인 : React에서는 리스트를 렌더링할 때, key 속성은 각 요소의 최상위 부모에 부여해야합니다.

결론 : fragment element(<></>)를 삭제하여 <Item/>을 최상위로 올려야한다.

//해결 코드
<div>
            {
                responseData?.map((el, idx)=>{
                    return(
                        <Item key={idx} data={el}/>
                    )
                })
            }
</div>

 

===GPT 4.0 답변===

네, 정확합니다! Fragment 내부에 Item 요소를 선언하면서 Fragment에 key를 설정하지 않아 문제가 발생한 것입니다.

React에서는 리스트를 렌더링할 때, 각 요소의 최상위 부모에 고유한 key 속성을 요구합니다. 현재 코드에서 **React Fragment (<>...</>)**는 최상위 부모로 작동하지만, Fragment 자체에는 key를 부여할 수 없기 때문에 경고가 발생합니다.

---

문제 상세

responseData?.map((el, idx) => {
    return (
        <>
            <Item key={idx} data={el} />
        </>
    );
});

위 코드에서는 <Item /> 컴포넌트에 key를 지정했지만, React는 Fragment에 key를 부여해야 한다고 간주합니다. 그러나 <>...</>는 간단한 Fragment로, key 속성을 부여할 수 없습니다.

---

해결 방법

Fragment를 제거하거나, React.Fragment를 명시적으로 사용하여 key를 설정하면 문제가 해결됩니다.

1. Fragment 제거

Fragment가 불필요하다면, Fragment를 제거하고 Item 요소 자체에 key를 지정합니다:

responseData?.map((el) => (
    <Item key={el.id} data={el} />
));

2. React.Fragment 사용

Fragment가 꼭 필요한 경우(여러 요소를 그룹화해야 하는 경우), React.Fragment를 명시적으로 사용하면서 key를 부여합니다:

responseData?.map((el) => (
    <React.Fragment key={el.id}>
        <Item data={el} />
    </React.Fragment>
));

---

결론

Fragment는 단순히 여러 요소를 그룹화하는 데 사용됩니다. 하지만 고유한 key는 항상 최상위 부모에 부여해야 하므로, 다음 중 하나를 선택해야 합니다:

1. Fragment가 필요 없다면 제거 → Item에 직접 key를 부여.
2. Fragment가 필요하다면 React.Fragment를 사용 → Fragment에 key를 부여