[css] React에서의 css

CSS Framework

css프레임워크는 레이아웃 및 여러 컴포넌트 구성, 브라우저 호환성을 보장하는데에 소요되는 시간을 최소화하기 위해 여러 웹 개발/ 디자인 프로젝트에 적용할 수 있는 css 파일 모음이다. 더 빠르게 앱을 스타일링하는데 도움을 준다. 아래에 보편적으로 쓰이는 CSS 프레임워크들과 그 특징을 정리해보았다.

1. Material-UI (MUI)

특징: 구글의 머티리얼 디자인 가이드라인을 구현한 React 컴포넌트 라이브러리.
장점: 현대적이고 일관된 UI를 제공하며, 커스터마이징이 용이하다. 다양한 프리미엄 테마와 컴포넌트를 제공.
사용 예: 빠르게 머티리얼 디자인 스타일의 웹 애플리케이션을 만들고 싶을 때.

2. React Bootstrap

특징: 인기 있는 Bootstrap을 React 컴포넌트 형태로 제공하는 라이브러리.
장점: 기존 Bootstrap의 강력한 기능과 스타일을 React 환경에서 사용할 수 있다. 모바일 우선 디자인, 반응형 웹 지원.
사용 예: 반응형 웹 사이트를 쉽게 개발하고 싶을 때, 익숙한 Bootstrap 스타일을 사용하고 싶을 때.

3. Semantic UI

특징: 인간의 언어와 유사한 HTML 클래스 이름을 사용하여 직관적인 코드를 작성할 수 있다.
장점: 사용하기 쉽고 직관적인 API, 다양한 UI 컴포넌트 제공.
사용 예: 읽기 쉽고 직관적인 HTML을 유지하면서 다양한 UI 요소를 빠르게 추가하고 싶을 때.

4. Ant Design

특징: 중국의 알리바바 그룹이 개발한 기업용 React UI 라이브러리.
장점: 고품질의 기업용 UI 컴포넌트와 디자인 시스템 제공, 다양한 레이아웃과 스타일링 옵션.
사용 예: 기업용 애플리케이션이나 대규모 관리 시스템을 개발할 때.

5. Materialize

특징: 구글의 머티리얼 디자인 가이드라인을 따르는 CSS 프레임워크.
장점: 반응형 디자인, 다양한 UI 컴포넌트 제공, 사용하기 쉬운 그리드 시스템.
사용 예: 머티리얼 디자인 스타일의 웹 페이지를 CSS로 빠르게 구축하고 싶을 때.

6 Tailwind CSS

특징: 유틸리티-퍼스트(utility-first) CSS 프레임워크로, 클래스 이름을 통해 스타일을 정의.
장점: 빠른 스타일링, 커스터마이징 용이, 반응형 디자인 지원, 스타일 재사용성 증가.
사용 예: 작은 프로젝트에서 빠르게 스타일링을 하고 싶을 때, 유연한 커스터마이징이 필요한 경우.

CSS 전처리기

1 SCSS (Sass)

특징: CSS의 전처리기(preprocessor)로, 변수, 중첩, 믹스인 등 다양한 기능을 제공하여 CSS 작성 효율성을 높입니다.
장점: 코드 재사용성 증가, 유지보수 용이, 더 적은 코드로 복잡한 스타일을 작성 가능.
사용 예: 대규모 프로젝트에서 CSS의 재사용성과 유지보수성을 높이고 싶을 때.

CSS-in-JS 라이브러리

1 Styled Components

특징: CSS-in-JS 라이브러리로, JavaScript 파일 내에서 스타일을 정의할 수 있습니다.
장점: 컴포넌트별로 스타일을 캡슐화하여 유지보수성 증가, 동적 스타일링 가능, 자바스크립트의 모든 기능을 스타일에 활용 가능.
사용 예: 리액트 프로젝트에서 컴포넌트 기반 스타일링을 선호할 때.
npm install —save styled-components 로 설치.

import styled from 'styled-components';

const btn = styled.button`
background : ${props ⇒ props.primary ? ‘red’ : ‘white’ };
margin:  10em;
padding : 10em;
`
const btn02 = styled(btn)`
color: green;
`

// <button primary>버튼</button>

<btn primary>버튼</btn>
<btn02>버튼2</btn>

이렇게 해당 태그 앞에 styled-components가 제공하는 기능인, styled를 붙혀 임의로 설정한 변수에 저장한다.

그 변수 자체를 태그처럼 사용가능하다.

또한 해당 styled-component에서 props 값을 가져와서 css에 활용할 수 있다.

또한 css의 상속도 가능하다. btn02 에서 styled() 뒤에 상속받을 스타일 컴포넌트를 입력하면, 해당 컴포넌트의 css속성까지 상속된다. → extend

import styled from 'styled-components';

// blue 클래스만 스타일링
const BlueDiv = styled.div.attrs(() => ({ className: 'blue' }))`
  background-color: blue;
  color: white;
  padding: 20px;
`;

const RedDiv = styled.div.attrs(() => ({ className: 'red' }))`
  background-color: red;
  color: white;
  padding: 20px;
`;

// 사용 예시
function App() {
  return (
    <>
      <BlueDiv>Blue Div</BlueDiv>
      <RedDiv>Red Div</RedDiv>
    </>
  );
}

export default App;

위 코드에서 div가 두개가 있다. styled.div를 하면 두 div에 css가 적용된다. 두 개의 div 중 하나에만 스타일을 적용하고 싶다면, 해당 div에 클래스 이름을 부여해서 사용해야한다.
추가적인 속성을 부여하는 방법은 아래와 같다.

const Box = styled.div.attrs(() => ({
  className: 'blue',
  tabIndex: 0
}))`
  background-color: blue;
  color: white;
  padding: 20px;

`

클래스명을 정의하거나 할 때 사용되는 attrs 메서드는 스타일드 컴포넌트에 추가적인 HTML 속성을 설정할 때 사용된다. 이 메서드는 함수를 인수로 받는다. 이 함수는 객체를 반환해야 하며, 이 객체는 추가될 속성을 정의한다.

스타일링 기법/도구

1 CSS모듈

CSS 스타일링 기법 중 하나이다. CSS 모듈은 웹팩(Webpack) 같은 빌드 도구에서 지원하며, 모듈화된 CSS를 사용할 수 있게 해준다. 이는 기본적으로 CSS를 컴포넌트 단위로 캡슐화하고 클래스 이름 충돌을 방지하는 기능을 제공.

그 외

프레임워크
Material-UI, React Bootstrap, Semantic UI, Ant Design, Materialize, Tailwind CSS, Bootstrap, Foundation, Bulma, UIKit

전처리기
SCSS (Sass), Less, Stylus

라이브러리
라이브러리: Styled Components, Emotion, JSS, PostCSS, Aphrodite, Radium

스타일링 기법/도구
CSS모듈

리액트에서 변수나 함수로 스타일을 만들어 style 속성에 부여해 사용할 수도 있다.

예시

// 변수 인라인 스타일
const btnStyle = {
  color: "#fff",
  border: "none",
  padding: "5px 9px",
  borderRadius: "50%",
  cursor: "pointer",
  float: "right",
  background: "#555",
};
// 함수 인라인 스타일
const getStyle = () => {
  return {
    padding: "10px",
    borderBottom: "1px solid #ccc",
    textDecoration: "none",
  };
};

//적용 태그
<div style={getStyle()}>
  <input type="checkbox" defaultChecked={false} />
  공부하기
  <button style={btnStyle}>x</button>
</div>;