css 처리 - vite.js + React

Vite.js와 React를 사용하여 css 를 처리하는 것은 페이지가 몇개 안될때는 하나의 index.css 또는 app.css 파일을 만들어서, main.js  파일로 불러들여 단일 페이지로 처리 할수있다. import './index.css' 그러나 협업의 단계에서는 동일 컴포넌트 내에서 CSS를 적용하는 방법을 택하는 것이 맞습니다, 여기서는 CSS 모듈과 스타일드 컴포넌트(Styled Components) 두 가지 방식을 설명하겠습니다.

1. CSS 모듈 사용

CSS 모듈은 CSS를 컴포넌트 레벨에서 캡슐화하여 사용할 수 있게 해주며, 클래스 이름 충돌을 방지해줍니다. 각 CSS 파일은 하나의 JavaScript 객체로 가져오고, 해당 객체의 속성으로 접근하여 스타일을 적용합니다. 아래 두개의 파일을 하나의 폴더로 묶어 관리ㅎ

/* src/components/Button.module.css */
.button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  outline: none;
}

// src/components/Button.js
import React from 'react';
import styles from './Button.module.css';  // CSS 모듈 import

function Button({ label, onClick }) {
  return (
    <button onClick={onClick} className={styles.button}>
      {label}
    </button>
  );
}

export default Button;

2. 스타일드 컴포넌트(Styled Components) 사용

스타일드 컴포넌트는 CSS-in-JS 라이브러리 중 하나로, 컴포넌트 내부에 스타일을 직접 작성할 수 있게 해줍니다. 이 방식은 스타일과 컴포넌트 로직이 같은 파일에 위치하므로 관리가 용이합니다.  styled components 를 설치해야 합니다.

npm install styled-components

// src/components/Button.js
import React from 'react';
import styled from 'styled-components';

const StyledButton = styled.button`
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  outline: none;
  transition: background-color 0.3s;

  &:hover {
    background-color: #0056b3;
  }
`;

function Button({ label, onClick }) {
  return (
    <StyledButton onClick={onClick}>
      {label}
    </StyledButton>
  );
}

export default Button;