6. UI 수정 및 개선

🔎 key={idx}와 key={place.id} 차이점?

☆ key={idx}

(배열 인덱스 사용)

→ 배열의 각 요소를 반복할 때 인덱스를 key로 사용하는 경우

 {[...Array(5)].map((_, idx) => (
 )}

 

☆ key={place.id}

(고유한 ID 사용)

→ place.id는 각 아이템에 고유하게 할당된 ID로, 이 값은 데이터베이스나 API에서 제공되는 유일한 식별자

 

---

🔎 하단 스크롤바 안 보이게 하는 법

 

 

📍tailwind.config.js

import plugin from "tailwind-scrollbar-hide";
...
  plugins: [plugin],
};

 

 

📍Mainpage.jsx

• "scrollbar-hide" 추가

...
<div className="flex space-x-4 overflow-x-auto pb-4 scrollbar-hide">
...

 

---

 

 

💭 추가 지식

Tailwind CSS에서 hover:scale-* 유틸리티 클래스의 단위는 ➡️ 배율(scale factor)

• hover:scale-100 → transform: scale(1); (변화 없음)
• hover:scale-105 → transform: scale(1.05); (5% 확대)
• hover:scale-110 → transform: scale(1.10); (10% 확대)
• hover:scale-95 → transform: scale(0.95); (5% 축소)

 

➕ Tailwind 기본 클래스에 없는 비율을 쓰고 싶다면?

→ style 속성 or Tailwind 커스텀 배율 사용 (ex. [1.05])

<div className="hover:scale-[1.03] transition-transform">...</div>