🆚 Styled Components VS Tailwind CSS

• 리액트에서 컴포넌트와 스타일이 결합되어 유지보수 및 재사용성을 높일 수 있음 | - HTML 클래스에 특정 클래스를 추가하여 스타일을 정의하는 유틸리티 프레임워크
• 클래스 기반의 스타일링이기 때문에 시스템을 일관되게 유지 및 빠른 작업 가능 | | 언어 및 문법 | - JS 기반으로 스타일 작성 | - HTML 클래스에 미리 정의된 클래스를 추가하여 스타일 적용 | | 동적 스타일링 | - JS의 변수 및 조건문을 활용해 동적으로 스타일 조작
• 런타임에 동적으로 스타이리 생성 | - 클래스 기반 스타일이기 때문에 정적 스타일에 장점을 보임
• 동적 스타일링은 클래스 조합을 통해 생성 | | 번들 크기 및 성능 | - 런타임에 스타일이 생성되므로 번들 크기 커질 수 있음 | - 빌드 시에 정적으로 클래스가 생성되므로 일반적으로 번들 크기 작음 |

// StyledComponentsCentering.js
import styled from 'styled-components';// 스타일드 컴포넌트의 경우 import 필수

const CenteredContainer = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
`;
<CenteredContainer></CenteredContainer> // 적용

// TailwindCSSCentering.js
<div className="flex justify-center items-center"></div>// 선언 및 적용

🔆 tailwind와 styled-components를 같이 사용한 이유

tailwind

• 스타일링을 빠르고 쉽게 할 수 있다.
• TailwindCSS를 단독으로 사용 할 경우 태그 내에 작성되는 className이 많아져 가독성 저해
• 유지보수 시 해당 태그를 코드 내에서 식별하여 className을 수정해주어야하는 번거로움 발생

styled-components

• 컴포넌트를 만드는 동시에 스타일 적용이 가능하고
• js코드와 css코드 간에 상태값 공유가 가능하다.
• Styled Components의 in-JS 문법을 활용하여 동적인 스타일 적용 가능

✔️ 사용기

• 동일 컴포넌트를 중복하여 사용 할 경우에 대한 편의성 도모
• 코드의 가독성 및 유지보수성 향상

styled-components로 반복되는 부분을 컴포넌트로 만들어 재사용할 수 있었는데

style을 할 때 tailwind를 사용하니 더 빠른 스타일링 처리가 가능했다.

이 두 라이브러리의 장점을 결합해서 사용하니 좀 더 편하고 효율적인 코드 작성이 가능했다.

✅ Tailwind + styled-components 설치 방법

1. 필요한 패키지 설치