React Style

• 리액트에서 스타일은 다양하게 적용시킬 수 있다.

💡 기존 CSS 클래스를 이용할 경우, 컴포넌트 별 로 클래스명이 중복되지 않도록 신경 써서 클래스명을 작성해주어야 한다.

1) 이름의 규칙을 정해준다.

• 클래스 형태로 이름을 만들어주거나 App-logo
• BEM네이밍(언더바 2개!)을 적용해준다. app__title-primary
  2) CSS Selector를 사용해준다.
• App이라는 특정 컴포넌트 내부의 header태그에만 적용하도록.
  .App header { … }

▶️ 인라인 스타일링

• 객체로 감싸서 작성해주어야 한다.
  • JSX에서 JavaScript 표현식은 중괄호 안에 작성된다. 그리고 JavaScript 객체도 중괄호를 사용한다. 따라서 중괄호 안에 중괄호를 넣어서 작성!
• 속성 이름은 camelCased로 작성해주어야 한다.
  • background-color 가 아니라 backgroundColor
• 스타일 정보가 포함된 객체를 생성하고 내부에서 사용 할 수도 있다.

const Header = () => {
  return (
    <>
      <h1 style={{color: "red"}}>빨간 글자!</h1>
      <p>그냥 p 태그!</p>
			<h3 style={{backgroundColor: "lightblue"}}>카멜로 작성!</h1>
    </>
  );
}

const Header2 = () => {
  const style = {
    color: "white",
    backgroundColor: "DodgerBlue",
    padding: "10px",
  };
  return (
    <>
      <h1 style={style}>Hello!</h1>
    </>
  );
}

▶️ CSS 스타일 시트

• App.css와 같이 별도의 파일을 만들어서 사용한다.
• import './App.css'; 해서 사용!

▶️ CSS 모듈

• CSS Module 형식을 사용하게 되면 자동으로 클래스명이 생성된다.
• 파일명에 .module을 추가해준다.
  • style.css 라는 파일명을 style.module.css 로 변경!
  • js파일에서 해당 스타일을 import해서 객체 형태로 사용 가능하다.

//[style.module.css]파일

.main{
  color: DodgerBlue;
  padding: 40px;
  text-align: center;
}

import styled from './style.module.css'; 

const Content = () => {
  return <h1 className={styled.main}>Hello!</h1>;
}

export default Content ;

▶️ SASS

• Syntactically Awesome Style Sheets
• CSS 전처리기를 이용해 복잡한 작업을 보다 쉽게 가능하게 해준다.
  • 전처리기란? 자신만의 특별한 문법을 가지고 CSS를 생성해주는 프로그램이다. 즉 변수, 함수 개념을 사용할 수 있다. 재활용성과 가독성이 높다!
• 얘는 앞으로 사라지는 추세라고 한다. npm i sass 로 설치!
• 사용 가능한 확장자는 .scss .sass

---

💡 `scss` 파일명 앞에 언더바를 두는 암묵적인 룰이 있다! `scss`끼리 서로 호출할 때 구분을 위해 사용한다. 자주 사용하는 메인컬러와 같은 경우 하나의 파일에 작성한다. 그리고 해당 파일을 `import`하는 식으로 사용한다.

---

SASS의 확장자 .scss

• 기존의 css파일과 비슷한 문법을 사용한다.
• 변수 선언 시 $를 앞에 붙여주어야 한다.

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
	font: 100% $font-stack;
	color: $primary-color;
}

SASS의 확장자 .sass

• 세미콜론;과 중괄호{}를 사용하지 않고, 탭(tab)을 이용해 스타일을 정의한다.
• 변수 선언 시 $를 앞에 붙여주어야 한다.

$font-stack: Helvetica, sans-serif
$primary-color: #333

body 
	font: 100% $font-stack
	color: $primary-color

SASS의 활용

• 변수 사용

$primary-color : #ff6347;
body {
	background-color : $primary-color;
}

• 연산

.container {
	width: 100% - 20px;
}

• 믹스인 : Mixin. 미리 CSS코드를 정의해 재사용.

@mixin border-radius($radius) {
	-webkit-border-radius: $radius;
	border-radius: $radius;
}
.button {
	@include border-radius(10px);
}

• 중첩 : 선택자를 중첩시켜 코드의 중복을 줄여주고 가독성을 높여준다.

div {
		ul{
			margin: 0;
				li{
						display: inline-block;
				}
			}
			&:hover {
				background-color: blue;
			}
	}

• 확장 : 기존의 선택자 스타일을 상속하여 사용 가능하도록 해준다.

.btn {
	padding: 10px;
	margin: 10px;
	border: 1px solid black;
}
.btn-primary {
	@extend .btn;
	background-color: blue;
}