const IterationSample = () => { const names = ['눈사람', '얼음', '눈', '바람']; const nameList = names.map(name => ''<li>{name}</li>); return ( <div> <ul>{nameList}</ul> </div> ); };
key문제가 발생합니다. 리액트에서 key는 배열의 어떤 원소에 변경이 일어났는지 알아내기 위해 사용합니다. Virtual DOM에서 변경사항을 알아낼때 더 빠르게 알 수 있습니다. key가 없으면 순차적으로 비교하지만 key가 있으면 해당 key로 알아낼 수 있습니다.
key를 설정해보도록 합시다.
const IterationSample = () => { const names = ['눈사람', '얼음', '눈', '바람']; const nameList = names.map((name, index) => <li key={index}>{name}</li>); return ( <div> <ul>{nameList}</ul> </div> ); };
map에 전달되는 index를 key로 설정한 예제입니다. 하지만 배열의 인덱스를 바로 키로사용하면 리렌더링할때 효율적이지 않아 되도록 피하는것이 좋습니다.
const arrayList = array.map(item => ( <Item title={item.title} writer={item.writer} key={item.id} /> ))
보통 다음과같이 props를 설정하듯 설정하고 그중 고유한 값을 key값을 설정하면 됩니다.