🎉 berenickt 블로그에 온 걸 환영합니다. 🎉
Front
Styling 라이브러리

1. 기본적인 styling 방법

1.1 Inline Style

1
const style = {

2
  backgroundColor: 'black',

3
  color: 'white',

4
}

5
const BlackBg = ({ children }) => {

6
  return <div style={style}>{children}</div>

7
}
  • 장점
    • 컴포넌트 내부에 스타일을 작성하기 때문에 컴포넌트를 재사용할 때 스타일이 함께 적용된다.
  • 단점
    • 컴포넌트 내부에 스타일을 작성하기 때문에 코드가 길어진다.

1.2 Css

1
// index.jsx

2
import './style.css'

3


4
const App = () => {

5
  return (

6
    <div className="some-class"></div>

7
    // some code

8
  )

9
}
1
/** style.css **/

2
.some-class {

3
  background-color: 'black';

4
  color: 'white';

5
}
  • 장점
    • 스타일을 다른 파일에 분리해서 관리할 수 있다.
  • 단점
    • 스타일명을 작명하다 보면, 중복이 발생할 수 있다.

1.3 Css Modules

1
import styles from './style.module.css'

2
const Button = () => {

3
  return <button className={styles.button} />

4
}
1
/* style.module.css */

2
.button {

3
  border-radius: 5px;

4
  padding: 5px;

5
}
  • 장점
    • 스타일을 다른 파일에 분리해서 관리할 수 있다.
    • 클래스명이 중복되지 않는다.

2. classNames

2.1 classNames

1
import classNames from 'classNames'

2
import './style.css'

3


4
const Button = ({ children }) => {

5
  const [active, setActive] = useState(true)

6
  // active가 true면, 'active'라는 클래스명이 적용된다.

7
  return <button classNames={classNames('button', active)}>{children}</button>

8
}
  • css 모듈과 css를 쓸 떄, 클래스명을 편하게 갖고 오기 위해 등장한 라이브러리
  • 주로 조건부 스타일링을 할 때, 사용한다.

2.2 css modules + classNames

1
import classNames from 'classNames/bind'

2
import styles from './style.module.css'

3


4
// styles를 바인딩한다.

5
const cx = classNames.bind(styles)

6


7
const Button = ({ children }) => {

8
  const [active, setActive] = useState(true)

9
  // active가 true면, 'active'라는 클래스명이 적용된다.

10
  return <button classNames={cx('button', active)}>{children}</button>

11
}

3. 스타일링 라이브러리 정리

어떤 라이브러리를 선택할 지는 개발자(본인)에게 달려있음

  • 반응형 웹을 대응하기 위해 media query를 많이 쓰고, 딱히 design system이 없던 곳에서 sass
  • 개발 편의성을 생각하면 CSS in JS를 쓸듯 emotion
IndexIndex