AI 요약관련 정보

• 리액트 컴포넌트는 UI를 조각 단위로 분리하여 재활용성을 높이는 핵심 개념입니다. 🧩
• 컴포넌트에 데이터를 전달하기 위해 Props를 사용하며, TypeScript 환경에서는 인터페이스를 통해 Props의 타입을 명확히 정의할 수 있습니다. 🎁
• Props는 물음표(?)를 사용하여 선택적으로 만들거나, 기본값을 설정하여 데이터가 없을 때의 동작을 정의할 수 있습니다. ❓
• 다양한 CSS 적용 방법:
  • 일반 CSS 파일 임포트: .css 파일을 직접 임포트하여 className으로 적용할 수 있으나, 클래스명 충돌의 위험이 있습니다. 📄
  • CSS 모듈: .module.css 파일을 사용하여 클래스명을 스코프화하여 충돌을 방지하고, styles.클래스명 형태로 적용합니다. 🛡️
  • 인라인 스타일: style 속성에 객체 형태로 직접 CSS 속성을 부여할 수 있으며, React.CSSProperties 타입을 활용할 수 있습니다. 🎨
  • Styled Components: CSS를 컴포넌트 내부에 직접 작성하여 컴포넌트와 스타일을 결합하는 라이브러리로, 기존 CSS 문법을 그대로 활용하며 미디어 쿼리 적용이 용이합니다. ✨
• 반응형 디자인 (미디어 쿼리):
  • CSS 미디어 쿼리: @media 규칙을 사용하여 화면 크기에 따라 동적으로 스타일을 변경할 수 있으며, CSS 모듈과 함께 사용 시 효과적입니다. 📐
  • React Hooks를 이용한 미디어 쿼리: use-hooks 라이브러리의 useMedia와 같은 훅을 사용하여 JavaScript 로직으로 반응형 스타일을 제어할 수 있으나, 설정이 다소 번거로울 수 있습니다. 🎣
  • Styled Components의 미디어 쿼리: 스타일드 컴포넌트 내에서 CSS 미디어 쿼리 문법을 그대로 사용하여 간편하게 반응형 디자인을 구현할 수 있습니다. 🚀
• 현업에서는 스타일드 컴포넌트가 개발 편의성과 유지보수 측면에서 장점이 있어 많이 활용되는 경향이 있습니다. 💼