[CSS] styled-components에 관하여

borderline0px·2022년 1월 5일
0

CSS

목록 보기
2/2
post-thumbnail

React에서 스타일링 작업을 할 때
주로 styled-components를 사용했다
그러나 제대로 활용하지 못했던 것 같아서
이번 글이 styled-components를 효율적으로 사용할 수 있는 계기가 되면 좋겠다

✏️ styled-components 문법

Tagged template literal을 사용하여 작성을 하게 된다

const Button = styled.button`
  border: 2px solid cornflowerblue;
  padding: 5px 10px;
`;

Template Literal

Tagged template literal에 대해서 설명하기 전
template literal이란 무엇일까?

template literal은 ES6에서 새롭게 도입되었으며,
백틱(``)을 사용하여 동적으로 문자열을 처리할 수 있도록 해준다
이전에는 문자열에 변수 값을 표현하기 위해 + 연산자를 이용해 문자열을 합쳤었다

const NAME = "borderline0px"

console.log(`My name is ${NAME}`)

Tagged Template Literal

Tagged template literal이란
template literal의 발전된 형태로
태그를 사용하여 템플릿 리터럴을 함수로 파싱할 수 있다

const tag = (...args) => console.log(...args);

tag("I", "like", "peach");

tag`I like peach`

위의 코드와 같이 tag라는 템플릿 함수를 정의해주었다

tag(): 함수로 호출하게 되면
단순 문자열이 출력된다

tag``: Tagged template literal 문법을 사용하면,
입력한 문자열이 분해되어, 타입을 유지하면서 파싱된다
이렇게 분해된 값들을 커스텀 태그를 통해, 다른 문자열로 조합하여 return 할 수 있을 것이다

✏️ styled-components의 장점

그렇다면 styled-components의 장점에는 무엇이 있을까?

scope 충돌 방지

특수한 className이 생성되기 때문에
파일들 사이에서 충돌이 발생하지 않는다

Sass의 Nesting(중첩) 사용가능

const Button = styled.button`
  border: 2px solid cornflowerblue;
  padding: 5px 10px;
  background-color: white;

  &:hover {
    background-color: pink;
  }
`;

props 전달을 통해, 동적으로 스타일링 가능

const Button = styled.button`
  border: 2px solid cornflowerblue;
  padding: 5px 10px;
  
  background-color: ${(props) => props.background ? "pink" : "coral"}
`;

export default function App() {

  return (
      <Button background={true}>Styled</Button>
  );
}

boolean타입의 background props을 전달하여
Button의 background색을 바꿔줄 수 있다

background-color: ${({background}) => background ? "pink" : "coral"}

위와 같이 destructuring도 해보고 다양한 형태로 활용 가능하다

쉽게 스타일을 확장할 수 있음

Button 인스턴스 만들기

const Button = styled.button`
  border: 2px solid cornflowerblue;
  padding: 5px 10px;
`;

스타일 확장을 통해 다른 버튼 만들기

쉽게 확장하여 색깔이 핑크인 버튼을 만들 수 있다

const PinkButton = styled(Button)`
  background-color: pink;
`;

"as" polymorphic prop 활용

만약 각각의 컴포넌트 및 HTML tag에 똑같은 스타일을 적용하고 싶다면
"as" prop을 활용하면 매우 유용하다
예를 들어, button 컴포넌트의 스타일을 a tag에 적용하고 싶다거나
div tag의 스타일을 button에 적용하고 싶을 때는
아래의 코드처럼 활용하면 된다

const LinkButton = styled(Button)`
  background-color: coral;
`;

<LinkButton as="a" href="https://google.com">
        Link
</LinkButton>

이상으로 styled-components의 원리와
장점 몇 가지를 정리해보았다

더 공부해서 글을 수정 보완해야겠다


📎 https://styled-components.com/docs/basics#extending-styles
📎 https://mxstbr.blog/2016/11/styled-components-magic-explained/
📎 https://react.vlpt.us/styling/03-styled-components.html

profile
어려운 게 아니라 낯설어서 그런거야

0개의 댓글