이번 프로젝트를 통해 평소에 무심코 쓰던 클릭, Ctrl, Shift를 손 쉽게 구현할 수 있는게 아니었구나를 몸소 체험했습니다.
event.ctrlKey || event.metaKey
event.shiftKey
onClick을 통해 MouseEvent를 받고 MouseEvent 중 조건문을 통해 crtlKey, metaKey, shiftKey를 판별하여 클릭된 요소를 배열에 넣어 다중 선택이 되도록 구현하였습니다.
<Component
id={el.id}
selectedId={selectedId}
>
</Component>
interface CssProps {
id: number
selectedId: number[]
}
/*styled-components 부분*/
const Component = styled.div<CssProps>`
...
${({ selectedId, id }) => {
/*ctrl + click*/
return selectedId.includes(id) ? 'transform: scaleY(1)' : ''
}};
...
`
예시: Color 값만 전달, 단일 값만 전달
배열도 props로 전달 될 수 있다.
"@types/styled-components": "^5.1.24"
vscode가 현저히 느려진다