react map의 렌더링

Question

import _ from lodash; import React from react; export default function Test() { return _.map([1, 2, 3, 4, 5], (value, index) => { return ( <>

{index + 1} 번

{value}

); }); } 이렇게 코드를 작성하면 콘솔창에 Warning: Each child in a list should have a unique key prop. 이 뜹니다. 근데 <> 부분에 key props를 사용하면 사용할 수가 없다고 나옵니다. 어떻게 해야할까요?!

엄홍재 · Answer

아마 빈 태그를 사용하신 이유는 저 부분을 묶어주기 위해서 사용한 것인데 사실 빈 태그는 React의 Fragment의 단축문법 입니다. 위의 map을 통해 key를 사용해야한다면 Fragment를 사용해주어야한다고 공식문서에 나와있습니다. https://ko.reactjs.org/docs/fragments.html#keyed-fragments Fragment는 props로 key를 유일하게 받을 수 있습니다 위의 코드를 좀 수정하면 아래와 같이 되겠네요 import _ from 'lodash'; import React, { Fragment } from 'react'; export default function Test() { return _.map([1, 2, 3, 4, 5], (value, index) => { return ( <Fragment key={index}> <p>{index + 1} 번</p> <p>{value}</p> </Fragment> ); }); }

{index + 1} 번

{value}

); }); }

LHS · Answer

현재 렌더링 되고 있는 화면에서 키는 유일해야 합니다. (현재의 map 뿐만 아니라 전체에서)
따라서 단순히 index를 key로 사용한다면, 같은 오류를 볼 가능성이 매우 큽니다. 특히, array의 요소가 자주 빠졌다, 추가되는 상황이라면 더다욱 index를 key로 활용하면 좋지않은 결과를 볼 수 있습니다.

렌더링 시 가상돔을 비교하는 구문에서 내용이 바뀌지 않았음에도, index가 바껴서 ley가 달라졌다면, 해당 내용은 다시 렌더링이 됩니다.