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를 짤 수 있게 된다.