리액트 앱 스타일링하는 3가지 방법

1. CSS import
2. CSS module
3. CSS-in-js

---

1. CSS import

CSS 파일을 Import해서 사용하는 방식으로 필요한 모든 CSS 스타일을 하나의 파일에 작성하여, 자바스크립트 파일과 코드 분리가 가능하다.

• 컴포넌트가 많지 않을 경우, 하나의 CSS 파일에 코드를 관리할 수 있음
• CSS 파일을 분리할 수 있지만, namespace를 나눌 수 없음
• 만약 스타일이 겹칠 경우 cascading rule에 의해 마지막에 나온 스타일이 적용됨.

// Button.jsx
import 'button.css'

function Button({ children }) {
	return (
    	<button className="button">
      		{children}
      	</button>
    )
}

/* button.css */
.button {
  color: blue;
  font-size: 20px;
  background-color: red
}

2. CSS module

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

CSS Module에서 사용한 클래스 이름과, 해당 이름을 고유화시킨 값이 key-value 형태로 들어있다. 이를 사용하기 위해서는 [파일이름].module.css 이런식으로 파일을 저장해야 한다.

// CSSModule.js
import React from 'react';
import styles from './CSSModule.module.css';

const CSSModule = () => {
  return (
    <div className={styles.wrapper}>
      안녕하세요, 저는 <span className="something">CSS Module!</span>
    </div>
  );
}

export default CSSModule;

// CSSModule.module.css
{
  wrapper: 'CSSModule_wrapper__CUMkx'
}

3. CSS-in-js

styled-components를 사용하여 별도의 CSS 파일을 만들지 않고 하나의 컴포넌트 파일 안에서 스타일을 작성하는 방식으로 자바스크립트 문법을 그대로 사용할 수 있다. Sass 문법 활용도 가능하다.

import React from 'react';
import styled from 'styled-components';

function MyReactButton(props) {
  console.log(props);
  return <button style={{ color: 'green' }}>{props.children}</button>;
}

const MyFirstStyledButton = styled.button`
  color: blue;
  font-size: 20px;
`;

const ChildButton = styled(MyFirstStyledButton)`
  background-color: green;
`;

function colorFn(props) {
  if (props.primary) {
    return 'white';
  } else {
    return 'black';
  }
}

const PropsButton = styled(ChildButton)`
  color: ${(props) => (props.primary ? 'white' : 'black')};
  background-color: ${(props) => (props.primary ? 'blue' : 'gray')};
`;

export default function App() {
  return (
    <div>
      <MyReactButton>My React Button</MyReactButton>
      <MyFirstStyledButton>My First Styled Button</MyFirstStyledButton>
      <ChildButton>Child Button</ChildButton>
      <ChildButton as="a" href="http://w3c.org">
        Child Button
      </ChildButton>
      <PropsButton primary>Props Button</PropsButton>
    </div>
  );
}

`

---

[참고링크]

CSS Module
리액트 컴포넌트 스타일링 방식