React 기초 06 · Lists & key
리스트와 key - 목록 그리기
배열을 화면 목록으로 그리기. 왜 key가 필요한지, index를 key로 쓰면 무슨 버그가 나는지 직접 봐요.
1
먼저 비유로
이름표를 붙여 줄을 세워요
배열을 화면 목록으로 그릴 땐 .map으로 항목마다 화면 조각을 만들어요. 이때 각 항목에 key라는 이름표를 붙여야 해요. React는 목록이 바뀌면 이 이름표로 "누가 누구인지" 알아보고 화면을 효율적으로 고쳐요. 그런데 이름표를 줄 선 순서(index)로 붙이면, 새치기(앞에 추가)나 이탈(삭제)이 일어났을 때 이름표가 엉뚱한 사람한테 가요.
그래서 key엔 순서가 아니라 항목 고유의 id를 줘야 해요. 아래에서 그 차이를 직접 만들어 볼 수 있어요.
2
직접 해보기
index key가 만드는 버그 재현
각 행의 메모칸에 글자를 적고, 맨 앞에 추가를 눌러보세요. key=index면 메모가 원래 과일을 안 따라가요. 스위치를 key=id로 바꾸고 다시 해보면 제대로 따라가요.
직접 만져보세요
- 🍎 사과
- 🍌 바나나
- 🍒 체리
각 행 메모칸에 글자를 적고 맨 앞에 추가를 눌러보세요. key=index면 메모가 원래 과일을 안 따라가고 자리에 남아요(엉뚱한 행에 붙음). key=id로 바꾸고 다시 해보면 메모가 제 과일을 정확히 따라가요.
메모를 적고 → 맨 앞에 추가 → index/id를 비교하세요.
핵심은 이거예요
목록의 key엔 위치(index)가 아니라 항목 고유 id를 주세요. 그래야 순서가 바뀌어도 React가 각 항목의 정체를 알아보고, 입력값·상태가 제 항목을 따라가요.
3
흐름으로 보기
왜 index key가 깨지나
- 1.map으로 항목마다 화면 조각을 만들고, 각자에 key를 붙여요.
- 2목록이 바뀌면 React는 'key가 같은 것끼리' 짝지어 화면을 고쳐요.
- 3key=index면, 앞에 추가할 때 0번 자리의 key(0)는 그대로라 React는 '같은 항목'으로 착각해요.
- 4그래서 그 자리의 입력칸 DOM을 재사용 -> 메모가 엉뚱한 항목에 남아요. id를 쓰면 정체가 유지돼요.
4
코드로 보기
딱 이만큼이에요
function FruitList({ fruits }) { return ( <ul> {fruits.map((fruit) => ( // key엔 위치(index)가 아니라 항목 고유 id를 준다 <li key={fruit.id}> {fruit.name} <input placeholder="메모" /> </li> ))} </ul> );}5
조심하세요
처음에 꼭 헷갈리는 것
- key=index를 습관처럼 쓰기. 목록이 절대 안 바뀌면 괜찮지만, 추가·삭제·정렬이 있으면 입력값/상태가 어긋나요. 고유 id를 쓰세요.
- key를 아예 빼기. React가 콘솔에 경고를 띄우고, 목록 갱신이 비효율적이거나 버그가 나요.
- id가 없다고 Math.random()을 key로 쓰기. 매 렌더마다 key가 바뀌어 항목이 통째로 새로 그려져요. 데이터에 안정적인 id를 만들어 두세요.