키가 중요한 이유는? map에서 컴포넌트 재사용을 위해서
키를 통해서 기존 트리와 이후 트리의 자식들이 일치한지 확인
key 값으로 줄 수 있는 것 : id, index(배열의)
index의 경우 항목들이 재배열되지 않는다면 동작이 가능하나, 그 배열의 순서가 재배열 되는 경우 비효율적으로 동작 할 수 있으니 유의할 것
제대로 key 값을 주려면 중복이 없고, 바뀌지 않는 값으로 주자
import React from "react";
import "./styles.css";
export default function App() {
const [data, setData] = React.useState(null);
const [errorMessage, setErrorMessage] = React.useState(null);
React.useEffect(() => {
fetch(
"https://raw.githubusercontent.com/techoi/raw-data-api/main/simple-api.json"
)
.then(function (response) {
return response.json();
})
.then(function (myJson) {
setData(myJson.data);
})
.catch((error) => setErrorMessage(error));
}, []);
if (errorMessage != null) {
return <p>error</p>;
}
if (data == null) {
return <p>loading</p>;
}
return (
<div>
{data.people.map((el, index) => (
<div key={index}>
<div> {el.name}</div>
<div> {el.age}</div>
</div>
))}
</div>
);
}
fetch를 이용해서 데이터를 불러온다
then => 성공 했을 때 상황
error => 에러가 났을 때 상황
loading => 데이터가 오기 전, 에러가 발생하지 않은 상황
= > 각 상태에서의 화면을 보여주자!!!!