✔ React에서 배열을 렌더링할 때 key 사용
💣 map 함수로 배열을 렌더링할 때의 문제 발생
아래와 같은 오류를 본 적이 한 번쯤은 있을 것이다.
이 오류는 map 함수를 통해 배열을 렌더링할 때, key 프로퍼티를 지정하지 않았을 때 발생한 오류이다.
💊 배열을 렌더링할 때 key를 설정해야 하는 이유
결론부터 말하자면, 위와 같이 배열을 렌더링할 때, 오류가 발생하기 때문에 key를 설정해야된다.
왜인지를 알아보자!
위와 같이 과일 배열을 렌더링한 것을 가정해보자.
배열이 오른쪽 그림과 같이 변하면 보통 망고가 삭제됐다고 생각한다.
하지만, 다르게 생각하면 포도가 삭제되고 망고가 포도로 변했다고 생각할 수도 있는 것이다.
즉, 결과만 봐서는 어떤 과정이 있었는지, 어떻게 바뀐건지 전혀 알 수가 없다.
하지만, key와 같이 고유한 값을 지정해주면 결과만 보고도 "2번 째 key값인 망고가 삭제됐구나"를 알 수 있습니다.
이러한 과정을 통해 왜 우리는 배열을 렌더링할 때, key 값을 줘야하는 지를 알 수 있다.
key를 사용하면 배열의 변화를 리액트에 정확히 전달할 수 있으며, 결과적으로 리액트가 key값을 기준으로 전체 요소의 변화를 파악할 수 있으므로, 성능면에서의 문제를 해결할 수 있다.
🔧 key 설정 방법
가장 바깥 쪽에 있는 (최상위) 태그에다가 key prop을 지정하면 된다.
각 데이터를 구분할 수 있는 고유한 값이면 무엇이든 key 로 활용해도 상관없다.
// 예시
import items from './pokemons';
function Pokemon({ item }) {
return (
<div>
No.{item.id} {item.name}
</div>
);
}
function App() {
return (
<ul>
{items.map((item) => (
<li key={item.name}>
<Pokemon item={item} />
</li>
))}
</ul>
);
}
export default App;🔑 key 설정 시 주의 사항
key 값은 배열 안에서 각 데이터를 고유하게 나타낼 수 있는 값이어야 한다.
한 key는 한 개의 데이터만 가리켜야 한다.
이때 가장 주의해야할 점은 index의 사용이다.
왜냐하면 보통 배열의 인덱스는 각 요소를 고유하게 나타내므로 key값으로 적절하다고 생각하기 때문이다.
하지만 자세하게 생각해보면 배열의 요소가 바뀌면(추가, 삭제, 수정) index(배열의 순서값)은 배열의 요소가 달라짐에 따라 달라진다.
예를 들어보자면,
let array = [Apple, Banana, Candy, Duck]
array.splice(2,1); // index 2번 값인 "Candy" 부터 1개 삭제// 이렇게 된다.
array = [Apple, Banana, Duck]바뀌기 전, a 배열에서 Apple은 index 0번, Banana는 index 1번, Candy는 index 3번, Duck은 index 4번이다.
하지만 Candy가 삭제되면 Apple과 Banana의 index는 동일하나 Candy가 삭제되어 Duck의 index는 4번에서 3번으로 바뀌었다.
여기서 중요한 점은 위에 강조했듯이 key값은 고유한 값이어야 한다. Duck은 index가 바뀌었으므로 다른 것에 문제가 발생할 수 있다.
이런 점이 발생할 수 있으니, index 값으로 설정하는 것을 주의해야 한다!
보통은 변화가 없는 id 값을 주로 사용한다
✍ 요약
- map 함수를 통해 배열을 렌더링할 때, key 프로퍼티를 지정하지 않았을 때 발생한 오류이기 때문에, key 값을 설정해야 한다!
- 가장 적합한 key 값은 고유한 값인 동시에, 어떤 변화가 일어나도 절대 변경되어서는 안되는 값(index ❌, id ⭕)이다.
🥄 참조링크
