230902 개발일지 TIL - React Swiper에서 map 함수를 사용할 때 고유한 키(Key) 값

React Swiper에서 map 함수를 사용할 때 고유한 키(Key) 값

React에서 map 함수를 사용하여 배열을 렌더링할 때, 각 자식 컴포넌트에 고유한 키(key) 값을 제공하는 것은 매우 중요하다. 이것은 React의 재조정 알고리즘을 최적화하고 예기치 않은 렌더링 문제를 방지하는데 도움을 준다.

{usersData.map((user) => (
  <SwiperSlide
    key={user.uid} // 각 항목의 uid를 key로 사용합니다.
    onClick={() => {
      navigate(`/${user.uid}`);
    }}
  >
  </SwiperSlide>
))}

위 코드에서 usersData 배열의 각 항목은 user 객체를 나타내며, 이 객체에는 uid라는 고유 식별자가 있다. 이 uid 값을 key로 사용함으로써 React는 각 항목을 고유하게 식별하게 되며 렌더링 최적화에 도움이 된다.

이렇게 하면 React에서 배열을 렌더링할 때 고유한 키 값을 지정하여 예기치 않은 렌더링 문제를 방지할 수 있다.