25 Key와 리렌더링

key

• Value를 특정하는 이름

• 배열에 map을 사용할 경우 key를 지정해주어야 한다.

• 키가 중요한 이유는? map에서 컴포넌트 재사용을 위해서

• 키를 통해서 기존 트리와 이후 트리의 자식들이 일치한지 확인

• key 값으로 줄 수 있는 것 : id, index(배열의)

• index의 경우 항목들이 재배열되지 않는다면 동작이 가능하나, 그 배열의 순서가 재배열 되는 경우 비효율적으로 동작 할 수 있으니 유의할 것

• 제대로 key 값을 주려면 중복이 없고, 바뀌지 않는 값으로 주자

26 상태 끌어올리기

• 자식 컴포넌트에 있던 함수, 변수 등을 부모 컴포넌트에서 관리를 할 수 있게 lifiting up
• 자식(형제) 컴포넌트로 내려준다
• props drilling : 과도한 liftingdms drilling을 야기할 수 있다
  => 너무 많은 컴포넌트 들이 props를 알게 되고, 이를 변경시킬 수 있는 위험 요소가 존재할 수 있음!!
  => context api 등과 같은 상태관리 라이브러리를 이용해 해결할 수 있음

Data Fetch

fetch api

• 네트워크 통신

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>
  );
}

1. fetch를 이용해서 데이터를 불러온다

2. then => 성공 했을 때 상황

3. error => 에러가 났을 때 상황

4. loading => 데이터가 오기 전, 에러가 발생하지 않은 상황

   = > 각 상태에서의 화면을 보여주자!!!!