CSS module

• create-react-app에서 제공.
• 컴포넌트에 대해 고유한 클래스와 고유한 버전의 스타일과 클래스를 생성
• css파일에 스타일을 작성하고 우리가 사용하는 컴포넌트로만 범위를 한정할 수 있음.
• css코드와 자바스크립트 파일을 분리하여 사용 가능함.

📎 css파일

• Button.module.css 생성

📎 import

• import styles from './Button.module.css'

📎 사용

const Button = (props) => {
  return (
    <button type={props.type} className={styles.button}>
      {props.children}
    </button>
  );
};

👉🏻 styles.button: styles를 참조하여 사용, styles는 객체이고, button은 클래스~!

📎 class="컴포넌트 이름-클래스 이름-고유한 해시값"

<button type="submit" class="Button_button__2lgkF">Add Goal</button>

• 우리가 작성한 스타일은 유지되고 새로운 클래스이름으로 래핑됨

📎 동적으로 사용하기

👾 #01

return( ...
  <div className={`${styles["form-control"]}
	  ${!isValid && styles.invalid}`}
  > ... </div>
)

👉🏻 백틱안에 변수로 선언 후 조건부를 이용하여 class를 추가함.(styles.invalid)
👉🏻 ${styles["form-control"] : - 사용으로 인해 []안에 작성함.

📎 미디어쿼리 사용하기

👾 Button.module.css

@media (min-width: 768px){
  .button {
    width: auto;
  }
}