2. React 앱에서의 스타일링 방법

CSS import

• CSS 파일을 import 해서 사용
• 필요한 모든 css 스타일을 하나의 파일에 작성하여, 자바스크립트 파일과 코드 분리 가능

css import 장단점

• 단순히 css파일만을 import하여 사용할 수 있어 편리
• 컴포넌트가 많지 않을 경우 하나의 CSS 파일에 코드를 관리하는 것도 가능
• CSS 파일은 분리할 수 있으나, namespace를 나눌 수 없음.
• 만일 스타일이 겹칠 경우 cascading rule에 따라, 마지막에 나온 룰이 덮어 씌어짐

CSS module

• 하나의 CSS module 파일 안에 작성한 스타일은 하나의 파일 namespace로 관리.
• class name 뒤에 겹치지 않는 hash를 붙임
• 스타일이 겹치는 상황을 해결
• 두 단어 이상의 경우, class명을 camelCase로 이름을 지음.

import styles from "./input-with-button.module.css";

export function InputWithButton() {
	return (
      <div className={styles.container}>
        <input type="text" name="text" className={styles.input} />
        <button className={styles.button}>Submit</button>
      </div>
	); 
}

CSS-in-JS

• 별도의 CSS 파일을 만들지 않고 하나의 컴포넌트 파일 안에서 스타일을 작성
• 자바스크립트 문법을 그대로 활용하여 코드를 작성(자주 활용하는 색상 변수로 선언 후 호출 가능!)
• React 컴포넌트를 사용하는 것 처럼 사용
• Sass 문법 활용 가능

출처 : 엘리스 아카데미