[React] react-beautiful-dnd Droppable snapshot 사용법

🎈 니코쌤의 팁
1. 사용법을 모르는 argument 마우스 오른쪽 클릭
2. go to type definition
3. index.d.ts에서 argument interface를 찾는다.
4. 때에 맞게 활용한다!

export interface DroppableStateSnapshot {
    isDraggingOver: boolean;
    draggingOverWith?: DraggableId | undefined;
    draggingFromThisWith?: DraggableId | undefined;
    isUsingPlaceholder: boolean;
}

이 인터페이스에서 isDraggingOver를 사용해보기로 한다.

{(provided, snapshot) => (
          <Area
            isDraggingOver={snapshot.isDraggingOver}
            ref={provided.innerRef}
            {...provided.droppableProps}
          >
			...
          </Area>
        )}

snapshot의 속성을 사용하는거니까 snapshot.isDraggingOver 를 넣어줌

이때 Area 에서 isDraggingOver를 사용하면 오류가 난다

 Type '{ children: (Element[] | ReactElement<HTMLElement, string | JSXElementConstructor<any>> | null | undefined)[]; 'data-rbd-droppable-context-id': string; 'data-rbd-droppable-id': string; isDraggingOver: boolean; ref: (element: HTMLElement | null) => any; }' is not assignable to type 'IntrinsicAttributes & { slot?: string | undefined; style?: CSSProperties | undefined; title?: string | undefined; ref?: ((instance: HTMLDivElement | null) => void) | RefObject<...> | null | undefined; ... 251 more ...; onTransitionEndCapture?: TransitionEventHandler<...> | undefined; } & { ...; } & { ...; }'.
      Property 'isDraggingOver' does not exist on type 'IntrinsicAttributes & { slot?: string | undefined; style?: CSSProperties | undefined; title?: string | undefined; ref?: ((instance: HTMLDivElement | null) => void) | RefObject<...> | null | undefined; ... 251 more ...; onTransitionEndCapture?: TransitionEventHandler<...> | undefined; } & { ...; } & { ...; }'.

왜냐!

Area 에 isDraggingOver를 사용한다는것과 isDraggingOver의 타입을 명시하지 않았기 때문 따라서

const Area = styled.div<{ isDraggingOver: boolean }>`
  background-color: ${(props) => (props.isDraggingOver ? 'pink' : 'blue')};
  flex-grow: 1;
`;

이렇게 속성과 타입을 명시해준다.

p.s.)공식문서를 보고 변수 명 짓는게 정말 중요하다는것을 배웠다. 처음 본 사용자도 쉽게 알수있는 변수 명이 얼마나 소중한지...