Styled component로 React Component 디자인

styled-component는 대표적인 CSS in JS 라이브러리다.

CSS in JS: 스타일 정의를 CSS 파일이 아니라 JS로 작성된 컴포넌트에 바로 삽입하는 기법

 

기본 문법

div, span, button 등 기본적인 HTML 엘리먼트를 스타일링 할 때는 아래와 같이 작성한다. 

const MyDiv = styled.div`
	// 어쩌고
`;

리액트 컴포넌트를 스타일링 할 때는 아래와 같이 괄호 안에 컴포넌트를 작성한다.

const StyledLink = styled(Link)`
	// 어쩌고
`;

 

가상 선택자

아래와 같이 &:로 작성한다.

const MySpan = styled.span`
	...
    &:hover {
      ...
    }
    &::after {
	  ...
  }
`;

 

다른 컴포넌트와 연결

템플릿 리터럴 문법을 사용하여 다른 컴포넌트와 연결할 수 있다. 예를 들어 나는 부모 컴포넌트에 hover 했을 때 자식 컴포넌트가 보여지게 하고 싶어서 다음과 같은 코드를 작성했다.

${ParentComponent}:hover & {
    visibility: visible;
  }

혹은 이렇게 작성할 수도 있을 것이다.

&:hover ${ChildComponent}{
  ...
  }

 

props 사용

props를 넘겨줄 수 있다. 아래는 내가 형광펜 툴을 개발하면서 작성한 코드다.

const Text = styled.span`
  background-color: ${(props) => props.color};
  margin-right: ${(props) => (props.continued ? "none" : "5px")};
  padding-right: ${(props) => (props.continued ? "5px" : "none")};
`;

아래처럼 원하는 값을 전달해주면 된다.

<Text
  color={highlighted[i]}
  continued={highlighted[i] === highlighted[i + 1]}
/>

 

attribute 삽입

고정되는 props, 다이나믹한 props, 기본 태그의 props를 전달할 수 있다. 아래는 내가 input 엘리먼트를 디자인하면서 작성한 attr 속성이다.

const EditedText = styled.input.attrs((props) => ({
  type: "text",
  placeholder: props.word,
  size: props.word.length,
}))`
	...
`;

 

as 속성

예를 들어 Button이라는 styled component를 구현했는데 같은 스타일의 a태그를 만들고 싶다면 as 속성을 사용하면 된다.

<Button as={"a"} href={"/"}>link</Button>

---

개발하면서 사용한 것들을 정리했는데, 계속 써보면서 새로운 내용을 발견하면 또 추가하겠다.