이미지 출처: https://dkje.github.io/2020/10/13/StyledComponents/
Styled Components
https://styled-components.com/
styled components는 javascript에서 css를 사용 할 수 있도록 도와주는 스타일링 프레임워크이다.
css 프레임워크나 라이브러리는 굉장히 종류가 다양한데 특히 React 개발을 할땐 컴포넌트 단위로 개발을 하기 때문에 이 styled components과 상성이 좋아 잘 사용하고 있는 것 같다.
실제로 채용 공고글을 보면 이 기술을 사용할 줄 아는 사람을 채용하려는 경우도 많아서 React 개발자라면 아마 필수 소양같은 느낌이 아닐까 싶다!
사용법은 간단하면서도 그렇지 않은(?) 느낌이다.
이유는 우선 javascript식 css다 보니 javascript를 모르거나 어려운 사람들이라면 "이..이게 뭐고?"하는 상황이 분명 발생할꺼라 생각이 든다.
우선 위에서도 말했지만 component 상황일때 빛을 발휘하기 때문에 component로 묶을 영역을 잘 잡아줘야 한다.
function Header() {
return (
<header>
<Title>To Do List</Title>
</header>
);
}
이렇게 Title로 만들어 보았다.
참고로 component로 만들고 싶다면 꼭 첫글자는 대문자로 사용해야 한다!
const Title = styled.h1 `
font-size:40px;
text-align:center;
font-weight:bold;
padding-bottom:20px;
letter-spacing:2px;
font-family: 'Roboto', sans-serif;
그리고 Title 태그 이름을 따라 변수로 지정해 주고 해당 태그가 어떤 태그인지 설정해 주면 된다.
원래 저 Title 자리가 h1 태그였기 때문에 styled.h1으로 만들어 줬다.
참고로 이 태그는 h1이야~라고 생각하면 된다. 버튼이라면 styled.button 이런식으로 작성하면 된다.
그리고 만들어진 변수 내용에 style을 넣는다.
원래 React의 style을 주려면 JS안에서 작성을 해야하기 때문에 {}를 사용해서 객체 형태로 만들어 주어야 했다. 하지만 이렇게 Styled-component라는 React와 찰떡인 이 프레임워크 덕분에 객체 형태가 아닌 일반 style 형태로 작성해 줄 수 있게 되었다. 만세!