CSS → SCSS → 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일 때 값을 나타나게 했다. 버튼을 다양하게 쓰면 정말 유용하게 쓰일 것이다.
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;
}
}
`;
당연한 얘기지만 변수로 정한 이름과 같이 컴포넌트이기 때문에 써줄 때는 대문자로 시작해서 컴포넌트처럼 적어줘야 한다.
처음에 써보니 백틱 안에 자동완성 기능이나 색깔이 변하지 않아서 일일히 철자 안 틀리게 적어줘야 하는 불편함이 있었다. 그러면서 내가 적은 게 맞나 확인하게 되는 귀차니즘이 있었는데 알고보니 자동완성시켜주는 확장프로그램이 있더라.. 꼭 설치해서 편하게 코딩하길 바랍니다.