스타일링 방법 선택 및 이유
- CSS-in-JS(styled-components)
- 기존 CSS에서 클래스 중복에 대한 불편함
- 가독성 측면에서의 장점
- 확장 가능성
- 동적 스타일에 대한 장점(props 사용)
- 컴포넌트화를 함으로써 컴포넌트명
하루스터디는 CSS-in-JS의 styled-components 를 사용한다.
스타일을 입히기 위해 class를 사용할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="box">박스</div>
</body>
</html>이 방법은 className을 통해 리액트에서도 적용할 수 있습니다. 하지만 class 또는 className이 중복이 되는지 확인을 하며 개발을 진행해야 합니다. 그렇지 않는다면 원하지 않는 스타일링이 생길 수 있습니다.
styled-components를 사용하면 이를 신경쓰지 않고 스타일링에 집중할 수 있습니다. styled-components마다 모두 다른 className이 보장되기 때문입니다. 다음은 styled-components를 사용하여 스타링을 한 뒤 렌더링 된 모습입니다. 모두 다른 class확인할 수 있습니다. 단, 같은 styled-components라면 같은 class를 가집니다.
styled-components를 사용한다면 공통으로 가지는 스타일을 만들고 이를 여러 styled-components에서 확장하여 사용할 수 있습니다. 다음은 이에 대한 간단한 예시입니다.
const ButtonLayout = styled.div`
// ...
border-radius: 4px;
padding: 8px 16px;
// ...
`
const SmallButton = styled(ButtonLayout)`
// ...
font-size: 12px;
`또는 다음과 같이 활용하여 css를 재사용할 수 있습니다.
const title = styled.css`
font-size: 24px;
font-weight: 900;
`
const subtitle = styled.css`
font-size: 20px;
font-weight: 700;
`
const Header = styled.header`
// ...
${title}
`
const Footer = styled.footer`
// ...
${subtitle}
`예시에서는 title과 subtitle에 대한 스타일을 미리 만들어 두고 해당 스타일이 필요한 곳에 가져와 사용하고 있습니다.
styled-components도 하나의 컴포넌트로 props를 받을 수 있습니다. 이를 활용하여 스타일을 동적으로 만들 수 있습니다.
type ButtonProps = {
backgroundColor: string
}
const Button = styled.div<ButtonProps>`
// ...
background-color: ${props => props.backgroundColor};
`이를 일반 css로 구현한다면 class를 다양하게 만들고 상황에 맞게 class를 수정해야 합니다.
함수명이 어떤 동작을 하는지 예측을 하는 것 처럼 styled-components를 사용한다면 tag도 어떤 의미를 가지는지 충분히 예측을 할 수 있습니다. 이는 리액트 컴포넌트를 읽는데 자연스러운 흐름을 제공하고 태그의 의미에 대한 의문점을 줄이는 데 큰 도움이 됩니다.
const Header = () => {
// ...
return (
<Layout>
<Logo>
<LogoImage src="..." />
<LogoText>하루스터디</LogoText>
// ...
</Logo>
</Layout>)
}위 LogoImage와 LogoText는 styled-components입니다. 이름만 보고도 어떤 것이 보이게 될 것인지 충분히 예측가능합니다.
stateofcss의 2022년 css-in-js에 대한 조사를 살펴보면 아직 styled-components가 다른 라이브러리보다 인지도와 사용량이 더 많은 것을 확인할 수 있습니다. 이는 styled-components에 대해 참고할 수 있는 레펀런스가 많다는 점과 연관있습니다.
하지만 만족도는 지난 해에 비해 6%가 하락한 71%이고 전체 라이브러리에서 6번째로 높습니다. 이는 사용량, 인지도에 비해 낮은 만족도라고 할 수 있습니다. 하지만, 현재 하루스터디의 프론트팀에서는 styled-components에서 제공하는 다양한 기능에 대해 만족감을 느끼고 있으며 이를 학습할 가치를 느끼고 있습니다.
위와 같은 이유로 하루스터디에서는 styled-components를 도입하기로 결정했습니다.