실습 준비

• src/components/StyledComponents 폴더 생성
• src/components/CssModules 폴더로 이전 실습 컴포넌트 이동
• src/App.jsx
• src/App.jsx → src/AppCSSModules.jsx

• src/main.jsx
• src/AppStyled.jsx 생성
• index.css
• App.css

Styled Components 란?

Styled Components는 CSS를 자바스크립트 안에서 작성할 수 있게 해주는 라이브러리로, 리액트 컴포넌트에 스타일을 쉽게 적용할 수 있습니다. Styled Components를 사용하면 컴포넌트와 스타일을 같은 파일에 작성할 수 있어, 코드의 가독성과 유지보수성이 향상됩니다. 이 라이브러리는 CSS-in-JS 방식을 사용하며, 동적 스타일링 및 테마 적용을 간편하게 할 수 있습니다.

사용 방법

먼저, 프로젝트에 Styled Components를 설치해야 합니다.

npm install styled-components