Styled Component: attr 속성 추가하기, hover, 커스텀 css 추가 등

현재 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;

새로운 걸 배우는건 언제나 재밌고 설레는 것 같다.