React 컴포넌트 스타일링 방법과 CSS-in-JS 라이브러리

React를 사용하다보면 여러 UI 컴포넌트들을 만들고 사용하며 관리하게 됩니다. 각 컴포넌트에 맞는 스타일링이 필수적으로 요구되므로 React에서는 다양한 스타일링 방법이 제공됩니다. 이번 글에서는 React 컴포넌트를 스타일링하는 방법과 CSS-in-JS 라이브러리에 대해 알아보고자 합니다.

 

일반적인 CSS 파일 Import

React에서는 기본적으로 CSS 파일을 import하여 컴포넌트에 스타일을 적용하는 방법을 사용할 수 있습니다. 이 방식은 일반적인 웹 개발에서 사용하는 CSS를 그대로 활용할 수 있고, 컴포넌트의 스타일링과 관련된 파일을 따로 유지할 수 있으므로 가독성과 유지보수성을 높일 수 있습니다.

이 방식을 사용하면 컴포넌트와 관련된 스타일을 별도의 CSS 파일로 분리하여 작성할 수 있으므로, 유지보수가 용이해집니다. 또한, CSS 파일의 클래스 이름을 컴포넌트의 className 속성에 할당하여 해당 스타일을 적용할 수 있습니다.

import React from 'react';
import './MyComponent.css';

function MyComponent() {
  return (
    <div className="my-component">
      {/* 컴포넌트 내용 */}
    </div>
  );
}

export default MyComponent;

Inline 스타일링 (JSX)

React에서는 인라인 스타일링을 지원합니다. JSX 문법에서는 스타일을 객체 형태로 작성하여 컴포넌트에 직접 적용할 수 있습니다. 이 방식은 컴포넌트의 스타일을 동적으로 변경해야 할 때 유용합니다. 이 방식을 사용하면 컴포넌트의 스타일을 동적으로 조작할 수 있으며, JavaScript의 변수나 상태에 따라 스타일을 변경할 수 있습니다. 하지만 인라인 스타일링은 컴포넌트의 구조와 스타일이 분리되어 있지 않아 가독성이 떨어질 수 있고, 복잡한 스타일링을 다루기에는 제한적일 수 있습니다.

import React from 'react';

function MyComponent() {
  const style = {
    backgroundColor: 'blue',
    color: 'white',
    fontSize: '16px',
  };

  return (
    <div style={style}>
      {/* 컴포넌트 내용 */}
    </div>
  );
}

export default MyComponent;

CSS IN JS 라이브러리

 

CSS-in-JS 라이브러리를 활용하는 방법이 있습니다. CSS-in-JS는 JavaScript 코드 내에서 스타일을 작성하고, 런타임에 동적으로 스타일을 적용하는 방식입니다. 이 방법은 컴포넌트와 관련된 스타일을 캡슐화하고, 스타일의 범위 충돌 문제를 해결할 수 있습니다. 대표적인 CSS-in-JS 라이브러리로는 styled-components, Emotion, CSS Modules 등이 있습니다.

styled-components를 예로 들어보겠습니다. styled-components는 컴포넌트를 정의할 때 템플릿 리터럴 문법을 사용하여 스타일을 작성합니다. 이렇게 작성된 스타일은 해당 컴포넌트에만 적용되므로, 스타일의 범위 충돌을 걱정할 필요가 없습니다.

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

const StyledComponent = styled.div`
  background-color: blue;
  color: white;
  font-size: 16px;
`;

function MyComponent() {
  return (
    <StyledComponent>
      {/* 컴포넌트 내용 */}
    </StyledComponent>
  );
}

export default MyComponent;

 

React 컴포넌트를 스타일링하는 방법으로는 CSS 파일 import, 인라인 스타일링, CSS-in-JS 라이브러리를 사용하는 등 방법이 많습니다. 각 방법은 사용 목적과 개발자의 선호도에 따라 선택할 수 있으며, 프로젝트의 특성과 요구사항에 맞게 적절한 방법을 선택하여 사용할 수 있습니다. 스타일링은 React 애플리케이션의 외관과 사용자 경험에 큰 영향을 미치므로, 신중하게 선택하고 일관된 스타일링을 유지하는 것이 중요합니다. 초심자라면 일반적으로 많이사용하는 방법으로 프로젝트 하나를 마무리 한 후 다른 방법을 배우는것이 좋습니다!.