[React] 컴포넌트 스타일링

일반 CSS

• 컴포넌트를 스타일링하는 가장 기본적인 방식
• CSS 클래스를 중복되지 않게 만드는 것이 중요

[이름 짓는 규칙]

• 이름-클래스 (예 : App-header)
• BEM 네이밍
  • 일종의 규칙을 준수해 해당 클래스가 어떤 용도로 사용되는지 명확하게 작성
  • .card_title-primary

• css Selector : 특정 클래스 내부에 있는 경우 스타일 적용

.App .logo {
	text-align : center;
}

Sass

• 자주 사용되는 css 전처리기 중 하나
• 확장된 CSS 문법을 사용
• 복잡한 작업을 쉽게 해주고 재활용성을 높여주며 코드의 가독성을 높임
• .sass 확장자, .scss 확장자 모두 지원

• 여러 파일에서 사용되는 Sass 변수 및 믹스인은 다른 파일로 따로 분리하여 작성한 뒤 필요한 곳에서 불러와 사용

CSS Module

• CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해줌
• 확장자 :  " .module.css "
• 흔히 사용하는 단어로 이름을 지어도 직접 불러온 컴포넌트 내부에서만 작동되므로 중복될 걱정할 필요 없음

• 전역적으로 사용되는 경우라면 :global을 앞에 입력하여 글로벌 CSS임을 명시

[classnames]

import classNames from 'classnames';

const MyComponent = ({ highlighted, theme }) => (
	<div className = {classNames("MyComponent", {highlighted}, theme)}> Hello </div>
);

→ 위 엘리먼트의 클래스에 highlighted 값이 true이면 highlighted 클래스가 적용되고 false면 적용 안됨

styled-components

• 스타일을 자바스크립트 파일에 내장시키는 방식
• 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있게 해줌

[반응형 디자인]

media 쿼리

@media (max-width : 1024px) {
	width : 768px;
}
@media (max-width : 768px) {
	width : 100%;
}