포켓몬 API 토이 프로젝트를 하면서 문제점

🛠 React Key 문제 해결 및 회고

🐞 문제 상황

• React에서 포켓몬 도감 데이터를 렌더링하는 과정에서 같은 포켓몬이 두 번씩 중복 렌더링되는 문제가 발생.
• key={index}를 사용했기 때문에 React가 고유성을 인식하지 못해 중복 렌더링을 일으킴.

---

🔍 문제 원인

1. React에서 key는 배열 내 요소를 고유하게 구분하는 데 사용.
2. key={index}는 배열의 순서가 바뀌거나 데이터가 추가/삭제될 경우 예상치 못한 동작을 초래.
3. 고유하지 않은 key로 인해 중복 렌더링이 발생.

---

✅ 해결 방법

1. 포켓몬 데이터의 name과 페이지 정보를 조합하여 고유한 key 생성:

   <CardList
     key={`${pokemon.name}-${pageIndex}`}
     item={pokemon}
     page={pageIndex}
     onClick={handleOntoggleModal}
     modalOnKey={handleOnModalProps}
   />

---

🚀 요약

1. 문제: 고유하지 않은 key로 인해 React가 중복 렌더링을 일으킴.
2. 해결: pokemon.name과 pageIndex를 조합하여 고유한 key 생성.
3. 배운 점: key는 고유해야 하며, React의 효율적인 렌더링을 위해 중요한 역할을 한다.
   4: 추가할 점: 고유한 키를 생성해주는 라이브러리를 설치하여 키를 변경해 주어야겠다.