React map함수에서 key의 중요성
React map함수에서 key의 중요성
map 함수는 콜백함수를 인자로 받고 콜백함수는 Array에 있는 하나하나의 데이터와 index를 인자로 받습니다.
React에서는 map 함수를 쓸 때에 key를 꼭 써줘야 합니다. key를 써주지 않으면 콘솔창에서 각 자식요소들은 고유한 key값을 가져야 한다고 경고메시지가 뜹니다.
브라우저에서는 아무런 영향이 없지만 콘솔창에는 에러메시지 처럼 뜹니다. 이것을 해결하기 위해서는 콜백함수에서 두번째 인자인 index를 key값으로 쓸 수 있습니다.
//App.js
import "./App.css";
function App() {
const userList = [
{ id: 1, name: "kim" },
{ id: 2, name: "jung" },
{ id: 3, name: "park" },
];
return (
<div className="App">
{userList.map((data, idx) => {
return <p key={idx}>{data.name}</p>;
})}
</div>
);
}
export default App;
위의 경우는 배열의 순서나 내용이 변경되지 않을 경우에 쓸 수 있습니다.
하지만 순서나 내용이 바뀌는 상황일 때에는 개별요소를 특정짓는 고유한 key를 사용해야됩니다. 배열에 추가를 하는 경우에는 원래 있던 요소들도 같이 렌더링이 되어 내가 원하는 순서로 나오지 않을 수 있습니다.
key가 없는 경우 변경이 필요하지 않은 리스트의 요소까지 전부 변경이 일어나게 됨으로 비효율적입니다. key가 존재한다면 기존 DOM과 가상 DOM을 비교해서 변화가 있는 요소만 빠르게 찾아내서 모든 요소들을 재렌더링을 하지 않습니다.
//App.js
import { useState } from "react";
import "./App.css";
const data = () => {
return [
{ id: 1, name: "kim" },
{ id: 2, name: "jung" },
{ id: 3, name: "park" },
];
};
function App() {
const [userList, setUserList] = useState(() => {
return data();
});
const [input, setInput] = useState("");
const change = (e) => {
setInput(e.target.value);
};
const addFn = () => {
setUserList((prev) => {
return [{ id: userList.length + 1, name: input }, ...prev];
});
};
return (
<div className="App">
{userList.map((data, idx) => {
return (
<input
key={data.id}
type="text"
placeholder={data.name}
style={{ display: "block", marginTop: "10px" }}
></input>
);
})}
<input
type="text"
style={{ display: "block", marginTop: "10px" }}
onChange={change}
></input>
<button onClick={addFn}>등록</button>
</div>
);
}
export default App;
위의 코드를 입력하고 브라우저에서 개발자 도구로 Elements 탭을 확인하면 새로 등록하는 요소만 깜빡이며 렌더링 되는 것을 볼 수 있습니다. 고유한 key가 없을 경우에는 모든 요소들이 재렌더링을 하기 때문에 DOM을 비효율적으로 운영하게 됩니다.
헷갈린다면 index를 쓰는 것보다 그냥 고유한 key값을 쓰는 것이 좋을 것 같습니다.
댓글
댓글 쓰기