[TIL] 2022/02/04

TIL

• Styled-Components : css-module 만 써왔던 나로서는 처음에는 styled-components를 배워야(?)해서 상당히 귀찮다고 생각했는데, 막상 써보니까 러닝 커브라는게 솔직히 거의 없는 것 같고, 바로 써먹을 수 있었다. 그중에서도 styled-components 자체가 하나의 컴포넌트이기에 props를 줄 수 있는데, 그렇게 props를 줘서 특정 상황에서는 A라는 css property를 주고, 특정 상황에서는 B라는 css property를 주는 식으로 쓸 수 있다는 점이 굉장히 매력적이었다. 이 때, css에서 js 코드를 쓰려면 어떻게 하는지에 대해서 간략하게 적어두고자 한다.

  ${({ test }) => {
    return test === 1
      ? `
      margin-right: 52px; 
      padding-top: 53px;
        `
      : test === 2
      ? `
      margin-right: 60px; 
      padding-top: 72px;
        `
      : null;
  }}

이런식으로 쓸 수 있다. test가 1일 때는 위와 같은 속성, 2일 때는 아래와 같은 속성을 적용해줄 수 있고, 아무것에도 해당이 안될 때는 null 을 줄 수 있다.