현재 Styled-Component를 쓰는 프로젝트를 진행하고 있다. 익숙한듯 익숙하지 않은 신기한 문법.
편한 방식이지만 처음부터 제대로 쓰긴 어려운 것 같고 입문자 기준 조금 생소한 부분에 대해서 정리해봤다.
attr 속성 추가하기
말 줄임 ellipsis 처리를 한 곳에는 항상 title 속성을 추가해주는 버릇이 생겼다.
구현해야 할 기능에 따로 명시된 건 아니지만 나는 넣어주는 편.
const TitleText = styled.p.attrs(props => ({
title: props.hoverTitle
}))`
...
<TitleText hoverTitle={item?.title}>
.attrs()는 기본 속성을 설정해주는 문법이다.
hoverTitle prop을 title 속성으로 변환하여 attr 속성으로 추가해줬다.
hover 처리하기
도메인 내용을 빼느라 코드가 조금 어색하다. 리스트 제목에 다운로드 가능 여부라니... :)
const TitleText = styled.p`
...
&:hover {
text-decoration: ${(props => (props.isDownloadable ? "underline" : ""))};
}
`
...
return (
<TitleText isDownloadable={true}>
{item?.title ?? ""}
</TitleText>
);
prop으로 던진 값에 따라 css를 변경하는 코드다.
hover는 기본 css 문법과 마찬가지로 작성하면 된다.
커스텀 css 적용하기
const ItemContainer = styled.div`
width: 100%;
${props => css({...props.styleOptions})};
`;
return (
<ItemContainer styleOptions={styleOptions}>
);
외부에서 받은 prop을 그대로 이은 css를 추가한다.
css를 덮어쓰게 하기 위해서 가장 마지막에 뒀다.
전체 코드
const ItemContainer = styled.div`
...
${props => css({...props.styleOptions})};
`;
const TitleText = styled.p.attrs(props => ({
title: props.hoverTitle
}))`
...
&:hover {
text-decoration: ${(props => (props.isDownloadable ? "underline" : ""))};
}
`
const ListItem = (props) => {
const {styleOptions, item} = props;
return (
<ItemContainer styleOptions={styleOptions}>
<TitleText hoverTitle={item?.title} isDownloadable={true}>
{item?.title ?? ""}
</TitleText>
<ButtonRemove></ButtonRemove>
</ItemContainer>
)
}
export default ListItem;
새로운 걸 배우는건 언제나 재밌고 설레는 것 같다.
728x90
'Frontend' 카테고리의 다른 글
MIME Type과 Content Type 그리고 application/octet-stream (2) | 2024.11.15 |
---|---|
JSP에서 자바스크립트 템플릿 리터럴 쉽게 사용하기 (0) | 2024.10.20 |