React에서 스타일드 컴포넌트(Styled Components) 사용하기

by

React 애플리케이션을 개발하면서 UI를 스타일링하는 것은 중요한 부분입니다. 그런데 어떻게 스타일링을 할까요? 이 블로그 포스팅에서는 @emotion/styled를 사용하여 React에서 스타일드 컴포넌트를 만들고 사용하는 방법을 알아보겠습니다.


@emotion/styled란?

@emotion/styled는 CSS-in-JS(JavaScript로 CSS 스타일을 관리) 라이브러리 중 하나로, React 컴포넌트에 스타일을 적용하기 위한 효율적인 방법을 제공합니다. 이를 통해 컴포넌트와 스타일을 한 곳에서 관리하고 유지보수하기 쉽습니다.


단계 1: 프로젝트 설정

먼저 React 프로젝트를 설정해야 합니다. Create React App을 사용하면 간단하게 시작할 수 있습니다.

npx create-react-app my-styled-app
cd my-styled-app


그리고 @emotion/styled를 설치합니다.

npm install @emotion/styled



단계 2: 스타일드 컴포넌트 생성

이제 스타일드 컴포넌트를 생성할 차례입니다. 예를 들어, 버튼과 헤딩(제목)을 스타일링하는 스타일드 컴포넌트를 만들어보겠습니다.

// StyledComponents.js
import styled from '@emotion/styled';

// 버튼 스타일드 컴포넌트
export const MyStyledButton = styled.button`
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;

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

// 헤딩(제목) 스타일드 컴포넌트
export const MyStyledHeading = styled.h1`
  color: #333;
  font-size: 24px;
`;



단계 3: React 컴포넌트에서 사용

스타일드 컴포넌트를 만들었으므로 이제 React 컴포넌트에서 사용할 수 있습니다.

// App.js
import React from 'react';
import { MyStyledButton, MyStyledHeading } from './StyledComponents';

function App() {
  return (
    <div>
      <MyStyledHeading>Hello Emotion Styled</MyStyledHeading>
      <MyStyledButton>Styled Button</MyStyledButton>
    </div>
  );
}

export default App;



단계 4: 동적 스타일링

@emotion/styled를 사용하면 상태에 따라 스타일을 동적으로 변경할 수 있습니다. 예를 들어, 버튼을 클릭할 때 배경색을 변경하는 동적 스타일링 예제를 제시합니다.

// App.js
import React, { useState } from 'react';
import { MyStyledButton } from './StyledComponents';

function App() {
  const [isClicked, setIsClicked] = useState(false);

  const handleClick = () => {
    setIsClicked(!isClicked);
  };

  return (
    <div>
      <MyStyledButton
        onClick={handleClick}
        style={{ backgroundColor: isClicked ? '#ff5733' : '#007bff' }}
      >
        {isClicked ? 'Clicked!' : 'Click Me!'}
      </MyStyledButton>
    </div>
  );
}

export default App;



결론

@emotion/styled를 사용하면 React 애플리케이션의 스타일링을 간편하게 관리할 수 있습니다. 컴포넌트와 스타일을 함께 유지하면 코드의 가독성과 유지보수성이 향상됩니다. Emotion은 다양한 스타일링 옵션과 기능을 제공하므로, 복잡한 스타일링 요구 사항에도 대응할 수 있습니다. 이제 @emotion/styled를 활용하여 React 애플리케이션을 스타일링해보세요!



Leave a Comment