TIL 22 | styled component

dongwheekeem·2021년 10월 24일
0

TIL

목록 보기
22/23

CSS → SCSS → styled-component???

styled component

처음에는 SCSS에 익숙해져서 와 편하다. 네스팅 기능으로 인해 CSS보다 가독성도 좋아지고, 겹치는 부분이 없어져서 너무 좋다!! 했는데 갑자기 새로운 기술을 접하게 되면서 혼란스러웠다.. 그런데 조금씩 써보면서 익숙해지니 SCSS보다 더 좋다!!

어떻게 쓰는 건데?

우선 별도의 SCSS 파일을 만들 필요가 없다. 그냥 js 파일에서 작업하면 되고, styled-component를 import해서 return 값 밑에 작성해주면 된다. const로 변수명은 내 마음대로 지으면 되고, 그 뒤에 styled.으로 내가 styled-component를 쓸거다라는 거를 정해주고 그 뒤에 해당 변수를 어떤 태그로 쓸거냐 정해주면 된다. 그러고 백틱 안에 SCSS 내용을 적어주면 된다.

import styled from 'styled-components';

const SiteName = styled.header`
  padding: 30px;
  color: green;
  font-size: 30px;
  font-weight: 800;
`;

그리고 조건에 따라서 같은 컴포넌트를 다른 디자인으로 꾸며줄 수가 있다.

<Button>	// 1번 버튼
<Button kakao>	// 2번 버튼

color: ${props => (props.kakao ? 'black' : '#fff')};
background-color: ${props => (props.kakao ? 'yellow' : 'green')};

이런식으로 삼항연산자로 두개의 버튼을 다른 색상으로 나타낼 수 있다. 2번 버튼을 보면 props 값으로 kakao로 줬다. 그래서 밑에서 props가 카카오면 글자 검정, 바탕 노랑색으로 나타내고 다른 경우에는 false일 때 값을 나타나게 했다. 버튼을 다양하게 쓰면 정말 유용하게 쓰일 것이다.

Nesting

styled-component도 SCSS와 동일하게 네스팅 기능이 적용된다. 그래서 하나의 컴포넌트를 지정하고 그 안에서 일반 태그를 사용하게 되면 네스팅을 통해서 태그에 디자인을 해줄 수 있다.

const SignupInformation = styled.article`
  margin-bottom: 24px;
  font-size: 13px;

  h4 {
    display: inline;
    margin: 5px;
    border-bottom: 1px solid #858a8d;
    cursor: pointer;

    &:nth-child(2) {
      border-bottom: none;
    }
  }
`;

component로 작성

당연한 얘기지만 변수로 정한 이름과 같이 컴포넌트이기 때문에 써줄 때는 대문자로 시작해서 컴포넌트처럼 적어줘야 한다.

꿀팁

처음에 써보니 백틱 안에 자동완성 기능이나 색깔이 변하지 않아서 일일히 철자 안 틀리게 적어줘야 하는 불편함이 있었다. 그러면서 내가 적은 게 맞나 확인하게 되는 귀차니즘이 있었는데 알고보니 자동완성시켜주는 확장프로그램이 있더라.. 꼭 설치해서 편하게 코딩하길 바랍니다.

profile
실패란 못하는 것이 아니라 하지 않았기 때문에 생긴 결과물이다

0개의 댓글