TIL 34 styled-component의 활용
이번에 맡게 된 프로젝트의 프론트 부분을 구현하면서 styled-component를 사용했다.
부트캠프 파이널 프로젝트에서 한번 사용한 경험이 있었기 때문에 바로 적용할 수 있었는데 그 중 새로 알게 된 내용에 대해 정리해본다.
상위 스타일 컴포넌트에서 하위 스타일 컴포넌트 선택
아래 코드는 스타일 컴포넌트의 기초 코드다. 보통은 Container
, Item
따로 따로 스타일을 지정해준다.
const Container = styled.div``;
const Item = styled.div``;
<Container>
<Item />
<Item />
</Container>
하지만 Container
-> Item
을 지정해줘야 하는 경우가 있다. 이 경우 어떻게 하는지 코드를 봐보자.
const Item = styled.div``;
// 우선 Container안에서 Item을 지정해주기 때문에 Container보다 Item을 먼저 선언해줘야 한다.
const Container = styled.div`
${Item} {
background: blue;
}
`;
<Container>
<Item />
<Item />
</Container>
위 코드처럼 Container
안에서 ${ }
을 통해 하위 스타일 컴포넌트를 지정해줄 수 있다.
스타일 컴포넌트에 props 전달
styled-component
에 props 전달이 가능하다는 사실을 알고 있었나? styled-component
는 다양한 기능을 제공해주고 있고 아직 배워야 할 방법들이 많지만 이번 프로젝트 때 유용하게 써먹은 props를 전달을 기록해본다.
props 전달은 다양하게 활용될 수 있는데 그 중 내가 props를 전달이 필요하다고 느끼고, 찾아보게 된 이유는 동일한 스타일 컴포넌트에 조건마다 다른 스타일을 적용하는 코드를 짜야 했기 때문이다.
예를 들어 전달되는 props가 1. completed
, 2.progress
, 3. not yet
일 때, 1번인 경우 배경색이 red, 2번인 경우 blue, 3번인 경우 green 이라고 하자.
const Container = styled.div``;
const Content: any = styled.div`
return (
<Container>
<Content status={...}>
</Container>
)
/* default */
color: #c4c4c4;
/* status에 따라 다른 style 적용 */
${(props: any) =>
props.status === 'completed'
? css`
background-color: red
`
: props.status === 'progress'
? css`
background-color: blue
`
: css`
background-color: green
`}
`;
위 코드처럼 props 전달을 잘 활용한다면 Content
에 전달되는 props에 따라 다른 스타일을 적용할 수 있게 되고, 사용자 편의성을 고려한 UI를 짤 수 있게 된다.
Author And Source
이 문제에 관하여(TIL 34 styled-component의 활용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jing07161/20210416저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)