스타일링 라이브러리 춘추 전국 시대. 그만큼 프로젝트의 입맛에 맞게 다양한 방식으로 스타일링을 적용하는 것이 가능해진 요즘이다.
계속해서 개발중인 사이드 프로젝트, ‘준비물 챙겼어?’에서는 Vite, React 기반의 CSR 프로젝트를 Next.js 13의 SSR 프로젝트로 변경을 진행했다.
이에 맞춰서 전반적인 코드 리펙토링도 진행되었는데, 스타일링 라이브러리도 이를 피해갈 수 없었다.
이번 글은 기존의 CSR 프로젝트에서 썼던 styled-components의 장점들, 그리고 마이그레이션을 하면서 Tailwind CSS로 넘어온 이유에 대해서 작성해보고자 한다.
변경 자체에 큰 이유는 없으나, 그럼에도 넘어온 결과에 대해서는 만족하고 있어서 혹여 비슷한 고민을 하고 있는 사람들에게 조금이나마 도움이 되길 바란다.
아마 내 주변에서 이제는 잘 안 쓰이는 CRA, Create React App을 통해 React 프로젝트를 처음 접한 사람들에게는 styled-components를 통해서 스타일링을 처음 진행한 사람들이 많을 것이다.
그만큼, styled-components(이하 ‘ST’)는 가장 접하기 쉬웠던 스타일링 라이브러리이며 지금도 React 프로젝트를 하면 다른 스타일링 라이브러리가 익숙해져도 ST의 방식이 여전히 좋아서 쓰고 싶어지는 경우가 근질근질할 때가 있다.
내가 느꼈던 styled-components의 장점을 열거하자면 다음과 같다.
리터럴 템플릿을 통해서 string인데도 css 방식 그대로 스타일링을 할 수 있던 점
section {
display: flex;
flex-direction: column;
align-items: flex-start;
height: 100%;
box-sizing: border-box;
}
export const Section = styled.section`
display: flex;
flex-direction: column;
align-items: flex-start;
height: 100%;
box-sizing: border-box;
`;
props를 이용해 동적 스타일링을 처리할 수 있던 점
const Title = styled.h2`
${fontsStyle.bold.bold24};
/* 이런 식으로 props를 이용한 동적 스타일링이 가능했다. */
color: ${(props) => props.color ?? colors.black};
margin: 0;
`;
이 둘만으로도 ST의 장점은 충분하다고 생각하고, 비록 메이저 업데이트가 끝나고 자잘한 업데이트만 진행한다고 발표했지만 CSS-in-JS 방식으로 처음 건드려보기 쉬운 스타일링 라이브러리는 여전히 ST라고 생각한다.