React - Component Styling

💁🏻‍♀️ 서론

개발자로서 기능이 우선이지만 스타일 또한 사용자 경험을 만드는 데 중요한 역할을 합니다.
이 글에서는 React component를 꾸미는 세 가지 접근 방식인 CSS, styled-components, Compnent Library 사용에 대해 살펴보겠습니다.

❶ CSS 사용하기

CSS 사용은 component의 스타일을 지정하는 가장 간단한 방법입니다.

사용 방법
1. 각 component에 대한 별도의 CSS 파일을 만듭니다.
2. React component에서 CSS 파일을 가져옵니다.
3. 요소에 클래스 이름을 지정하고 CSS 파일에서 스타일을 정의합니다.

예시

/* styles/Button.css */
.button {
  background-color: blue;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

// components/Button.js
import React from 'react';
import '../styles/Button.css';

const Button = ({ onClick, children }) => (
  <button className="button" onClick={onClick}>
    {children}
  </button>
);

export default Button;

---

❷ styled-components (CSS-in-js)

Styled-components는 많이 사용되는 CSS-in-JS 라이브러리로 JavaScript 파일에 CSS를 직접 작성할 수 있습니다.
전체 CSS 충돌을 피하고 스타일과 component를 따로 분리하는 데 도움이 됩니다.

사용 방법
1. styled-components 라이브러리를 설치합니다.
2. 스타일이 지정된 API를 사용하여 스타일이 지정된 component를 만듭니다.

예시

styled-components 설치

npm install styled-components

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

const StyledButton = styled.button`
  background-color: blue;
  color: white;
  padding: 10px;
  border-radius: 5px;
`;

const Button = ({ onClick, children }) => (
  <StyledButton onClick={onClick}>
    {children}
  </StyledButton>
);

export default Button;

---

❸ Components Library

Components Library를 사용하면 시간을 절약하고 응용 프로그램 전체에서 일관된 디자인으로 만들 수 있습니다.

사용 방법
1. Material-UI, Ant Design 또는 Bootstrap과 같은 라이브러리를 선택합니다.
(이 외에도 다양한 라이브러리가 있습니다.)
2. 라이브러리를 설치하고 필요한 component를 가져옵니다.

예시(Meterial-UI)

Material-UI 설치

npm install @mui/material

import React from 'react';
import Button from '@mui/material/Button';

const CustomButton = ({ onClick, children }) => (
  <Button variant="contained" color="primary" onClick={onClick}>
    {children}
  </Button>
);

export default CustomButton;

---

📝 총정리

각 접근 방식에는 장단점이 있기 때문에, 프로젝트 요구 사항에 가장 적합한 방법을 선택하는 것이 중요합니다.
CSS, 스타일 component를 사용하는 CSS-in-JS 또는 미리 빌드된 component 라이브러리를 선택하든 component 스타일 지정을 하게 되면, 애플리케이션의 사용자 경험이 크게 향상됩니다.