[React] React Styling

---

1.CSS Module

각 컴포넌트마다 고유한 클래스를 생성하여 스타일 충돌을 방지하는 방법
각 CSS 파일이 모듈화되어 있으며, 클래스 이름은 컴포넌트에 맞게 고유하게 바뀐다.

// MyComponent.module.css
.button {
  background-color: blue;
}

// MyComponent.js
import styles from './MyComponent.module.css';

const MyComponent = () => {
  return <button className={styles.button}>Click me</button>;
};

 

 

 

 

 

2.Styled-components

JavaScript 코드 내에서 스타일을 작성할 수 있게 해주는 라이브러리
CSS-in-JS 방식으로, 스타일을 JavaScript 내에 직접 작성하며, 동적인 스타일링도 가능

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
`;

const MyComponent = () => {
  return <Button>Click me</Button>;
};

 

 

 

3.Emotion

CSS-in-JS 라이브러리로, styled-components와 유사하지만 좀 더 빠르고 효율적인 성능을 제공
템플릿 리터럴을 사용가

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

const buttonStyle = css`
  background-color: blue;
  color: white;
`;

const MyComponent = () => {
  return <button css={buttonStyle}>Click me</button>;
};