AI 요약관련 정보

• React 컴포넌트 스타일링의 세 가지 주요 접근 방식(인라인 스타일, 외부 CSS 파일, CSS 모듈)을 실용적인 알림 컴포넌트 예시를 통해 설명합니다. 🎨
• 인라인 스타일은 JSX 내에서 JavaScript 객체를 사용하여 스타일을 직접 적용하며, CSS 속성은 카멜 케이스(camelCase)로 작성됩니다. props를 통해 동적으로 스타일을 변경할 수 있지만, 스타일이 많아지면 코드가 복잡해질 수 있습니다. ✍️
• 외부 CSS 파일은 전통적인 CSS 파일을 컴포넌트에 임포트하여 className prop으로 적용하는 방식입니다. 여러 클래스를 템플릿 리터럴로 조합할 수 있습니다. 📁
• 외부 CSS 파일 방식은 클래스 이름이 전역 스코프를 가지므로, 다른 컴포넌트에서 동일한 클래스 이름을 사용할 경우 스타일 충돌이 발생할 수 있습니다. 💥
• CSS 모듈은 *.module.css 파일 명명 규칙을 사용하여 CSS 클래스를 로컬 스코프로 제한하는 해결책입니다. 고유한 클래스 이름을 자동으로 생성하여 스타일 충돌을 방지합니다. 🛡️
• CSS 모듈은 import styles from './file.module.css' 형태로 임포트하며, styles.className 또는 동적 클래스의 경우 styles[variable] 형태로 접근합니다. 🧩
• CSS 모듈은 CSS의 장점을 유지하면서 이름 충돌 문제를 해결하므로, 컴포넌트 스코프 CSS를 위한 권장되는 접근 방식입니다. 🌟
• 현재 React 생태계에서 가장 인기 있는 스타일링 프레임워크로 Tailwind CSS가 언급되었으며, 별도 강좌에서 다룰 예정입니다. 🚀