React Drag & Drop에서 style을 다루는 방식 차이 (Draggable vs Droppable)

🤔 문제 상황

드래그 앤 드롭 리스트를 만들다가 궁금한 점이 생김:

• ul 태그 (Droppable)에는 그냥 style={{ padding: 20 }} 이렇게 간단하게 스타일을 줘도 되는데,
• li 태그 (Draggable)에는 ...provided.draggableProps.style처럼 복사해서 스타일을 덧붙여야 작동함

왜 그런 차이가 생기는 걸까?

---

✅ 핵심 개념 요약

🔹 Draggable에는 라이브러리 내부에서 계산한 style이 있다!

style={{
  ...provided.draggableProps.style,
  padding: '8px',
}}

• provided.draggableProps.style에는 드래그 중 위치 이동, 애니메이션, 트랜지션 등을 위한 내부 계산된 스타일이 담겨 있음
• 이 스타일을 유지하지 않으면 드래그 기능이 깨짐!
• 그래서 기존 스타일을 복사(...)하고, 내가 원하는 스타일을 덧붙여야 함

---

🔹 Droppable에는 별도로 제공되는 style이 없다

<ul style={{ padding: 20 }}>

• provided.droppableProps는 드롭 이벤트를 위한 속성만 제공 (data-*, role 등)
• 별도로 계산된 style은 없음 → 내가 자유롭게 스타일 지정해도 기능에 영향 없음

---

🔹 JSX에서 style={{}} 중괄호가 두 번 쓰이는 이유

• JSX에서는 JavaScript 표현식은 {}로 감싸야 하고,
• style은 JS 객체니까 {{ ... }} 형태가 됨

📌 예:

<div style={{ color: 'red', margin: '10px' }} />

---

📊 정리 표

구분	설명	예시
Draggable의 style	드래그 동작을 위해 내부 style 계산 포함됨 → 반드시 복사해서 사용	...provided.draggableProps.style
Droppable의 style	라이브러리가 style을 계산해서 넘기지 않음 → 내가 직접 지정	style={{ padding: 20 }}
{{}} 문법	JSX + JS 객체 표현식 조합	style={{ color: 'red' }}

---

✅ 한 줄 요약

Draggable은 라이브러리 내부 style을 유지해야 하므로 ...style로 복사해서 써야 하고,Droppable은 자유롭게 스타일을 지정해도 된다.
JSX의 {{}}는 JS 객체를 넘기기 위한 문법상 구조다.